Высота 100% - PullRequest
       3

Высота 100%

5 голосов
/ 25 января 2010

Hie Everyone

Я разрабатываю веб-страницу с изменяемым макетом. Я хочу сохранить 100% ширину и 100% высоту. Проблема в том, что я не знаю, как сохранить div "left" и "right" со 100% высотой внутри родительского div, "wrapper".

<div id="container" style="width:100%; height:100%">  
     <div id="header" style="width:100%; height:100px">
     </div>

     <div id="wrapper" style="width:100%; height:(100% - 100px)">
           <div id="left" style="width:250px; height:(100% - 100px)">
           </div>

           <div id="right" style="width:(100% - 250px); height:(100% - 100px)">
           </div>           
     </div>          
</div>

Пожалуйста, помогите.

Ответ от doctype.com

CSS

html, body{
    height: 100%;
    margin: 0;
    padding: 0;
}

HTML

<body>
<div id="container" style="width:100%; height:100%; position: absolute;">  
  <div id="header" style="width:100%; height:100px;">
header
  </div>
  <div id="wrapper" style="width:100%; height:auto; position: absolute; top: 100px; bottom: 0;">
    <div id="left" style="width:250px; height:100%; float:left;">
    left
    </div>
    <div id="right" style="width: 250px; height:100%; float:right; ">
    right
    </div>           
    main content
  </div>          
</div>
</body>

Ответы [ 4 ]

10 голосов
/ 25 января 2010

Если я правильно понимаю, вы хотите поместить div влево и вправо внутри вашего div-оболочки, но при этом сохраните полную высоту div-оболочки на экране?

Если это так, правый и левый div, конечно, входят в оболочку, и вы используете {... float: left; позиция: относительная;} и {... float: right; position: относительный;} плавать их в стороны.

Теперь, поскольку вы разместили эти два div, которые являются частью содержимого вашего div-обертки, сама обертка может иметь нулевую высоту. Это потому, что два div внутри "плавают из этого". Чтобы придать вашей обертке ту же высоту, что и у двух элементов div внутри, вы можете ИЛИ:

  • поместите это как третий div в вашу оболочку: <div style="clear: both;"></div> OR
  • поместите любой элемент в вашу оболочку после двух элементов div (например, span) и присвойте ему свойство CSS {... clear: both;}

Теперь вы "очистили поплавки", и ваша обертка имеет полную высоту двух div внутри.

ЕСЛИ НА ДРУГОЙ РУКЕ, вы хотите, чтобы весь ваш контент всегда растягивался на всю высоту экрана, независимо от того, что вы там поместили, вам нужно будет сделать немного магии CSS, и это будет слишком сложно объяснить, не видя ваш код. Начните здесь: http://ryanfait.com/sticky-footer/

Надеюсь, это поможет.

3 голосов
/ 25 января 2010

Если вы сделаете все элементы на одном уровне равными 100% ширины и высоты, вы получите неожиданное поведение между браузерами. В приведенном вами примере вы пытаетесь выделить header и wrapper все пространство внутри родительского элемента.

100% container
+----------------------------+
| 100% header  100% wrapper  |
| +----------+ +-----------+ |
| |         errr...?       | |
| +----------+ +-----------+ |
+----------------------------+

Как это действительно возможно? Есть несколько способов сделать это:

  • первый элемент получает все пространство или
  • оба должны перекрываться или,
  • они оба делят пространство

Так что вам нужно быть более точным при указании процентов.


Кстати, вы пробовали float использовать свои элементы?

position: relative; // or absolute
float: left;
2 голосов
/ 25 января 2010

Чтобы иметь div с браузером высотой 100%, родительский элемент также должен иметь высоту 100%. Попробуйте добавить следующий CSS:

html, body { height: 100%; margin: 0; padding: 0; }
0 голосов
/ 25 января 2010

попробуйте добавить

мин-высота: 100%; на ваш css, chk out этот пример

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...