Member 11384516 Ответов: 4

Как установить внутреннюю ширину и высоту div на внешний div, а также центр окна с адаптивным?

<div name="outer" style='background-color:red; '>
       <div name="inner"style='background-color:yellow; '>

       some content<br>
       some content<br>
       some content<br>
       some content<br>
       some content<br>


        </div>
</div>




Примечание: внутренний div не устанавливает статическую ширину и высоту. внутреннее содержимое div динамически связывается с базой данных, поэтому в Администраторе базы данных задаются ширина и высота.эта ширина и высота фиксируются к внешнему div. а также div должен быть показан по центру окна с отзывчивым

спасибо

4 Ответов

Рейтинг:
2

Member 10371622

Если вы хотите, чтобы внутренний div покрывал всю ширину и высоту вашего внешнего div, установите ширину и высоту вашего внутреннего div на 100%, как это

<div style="width:100%; height:100%"></div>

Member 11384516

если я установил как это означает div не центр окна см.

http://jsfiddle.net/yPMVJ/61/

Member 10371622

ты хочешь этого ?
http://jsfiddle.net/yPMVJ/63/

Member 11384516

да я хочу так но не нужно показывать красный цвет а также нижний и Верхний не центр страницы помните Не устанавливайте статическое нижнее и верхнее значение

Member 10371622

Если вы не хотите показывать красный цвет, просто удалите цвет внешнего div.
в чем проблема ?

Member 11384516

хорошо, я поставлю. но сверху и снизу див не центр вижу.
http://jsfiddle.net/yPMVJ/69/

Member 11384516

друг смотрите ниже ссылку fancybox pic show on responsive near by facebook like icon above pic.

http://www.jqueryscript.net/lightbox/Easy-jQuery-Lightbox-Plugin-For-Image-Gallery-ion-zoom.html.
после нажатия кнопки pic adject window

Member 11384516

статическое значение, значит, верхняя часть:25%; ширина:28%; - за содержание static означает, мы больны набор, но вот контент динамический.

Рейтинг:
1

Member 10371622

Я не понял смысла этой строки
"Как установить внутреннюю ширину и высоту div на внешний div"

Если вы хотите установить положение вашего div центра на экране просто установите стиль следующим образом

<div style="margin: 0 auto"></div>

Member 11384516

всем привет,
это означает, что внутренняя ширина div: 250px; высота:350px означает, что эта ширина и высота также влияют на внешний div

пожалуйста, смотрите http://jsfiddle.net/yPMVJ/49/ эту ссылку я хочу показать только желтым div

Member 10371622

Что ты хочешь сделать ?

Member 11384516

я хочу показать div центр на странице с отзывчивым как fancybox

Member 11384516

как можно выполнить эту задачу? это мой вопрос, потому что содержимое div добавляется из html-кода базы данных. я не устанавливал свойство static. один контент маленький, другой больше контента.

Member 11384516

как можно выполнить эту задачу? это мой вопрос, потому что содержимое div добавляется из html-кода базы данных. я не устанавливал свойство static. один контент маленький, другой больше контента.

Рейтинг:
0

Peter Leow

Попробовать это:

<!DOCTYPE html>
<html>
<head>
<style>
#inner {
    background-color: yellow;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
</style>
</head>
<body>
<div name="outer" id="outer">
       <div name="inner" id="inner" style="width:250px; height:350px">
       put your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents hereput your contents
put your contents here
        </div>
</div>
</body>
</html>

Что касается добавления отзывчивости, прочтите мою статью От равнодушного к отзывчивому веб-дизайну[^]

Рейтинг:
0

jaket-cp

Если я получу то, что вы просите, и вы хотите, чтобы внешний div заполнял все окно, а внутренний div находился в центре внешнего div.
Вы можете попробовать что-то вроде этого (тестирование в Chrome):

/*css*/
html, body {
    height:100%
}
.outer {
    background-color: red;
    height:100%;
}
.inner {
    background-color: yellow;
    position:relative;
    top:50%;
    width:50%;
    transform:translateY(-50%);
    margin: auto auto auto auto;
}

<!--html-->
<div name="outer" class="outer">
    <div name="inner" class="inner">put your contents here ...</div>
</div>

Вы можете удалить фон-цвет, они только для шоу.
Вот скрипка:http://jsfiddle.net/yPMVJ/71/[^]

Вот ссылка на технику вертикального выравнивания: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/[^]