100%div高度

Question

100%div高度

大家好

我正在设计一个流畅布局的网页.我希望保持100%的宽度和100%的高度.问题是我不知道如何在他们的父div"包装器"内保持div"left"和"right"的高度为100%.

<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>

Run Code Online (Sandbox Code Playgroud)

请帮忙.

来自doctype.com的回答

CSS

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

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Tom*_*Tom 10

如果我理解正确,你想在你的包装div中左右浮动div,但是在屏幕中保留包装div的全高？

如果是这样,右边和左边的div当然会进入包装器,你使用{... float:left; position:relative;}和{... float:right; position:relative;}将它们浮动到两侧.

现在,因为你已经浮动了这两个div,它们是你的包装器内容的一部分,包装器本身可能没有高度.这是因为里面的两个div"漂浮出来".为了给你的包装器提供与内部两个div相同的高度,你可以:

把它作为你的包装器中的第三个div:<div style="clear: both;"></div> OR
在两个div(如span)之后将任何元素放在你的包装器中,并给它一个CSS属性{... clear:both;}

现在你已经"清除了漂浮物",你的包裹物里面有两个div的全高.

如果在另一只手上,你希望你的所有内容都延伸到屏幕的整个高度,而不考虑你放在那里的东西,你需要做一些CSS魔术,它太复杂,无法解释你的代码.从这里开始:http://ryanfait.com/sticky-footer/

希望有所帮助.

归档时间：	16 年，5 月前
查看次数：	9870 次
最近记录：	16 年，4 月前