设置高度100％不起作用 [英] setting height 100% not working

问题描述

由于某种原因，尽管将容器的高度设为100％，它的边界也不会一直延伸到底部。这是我的代码，容器在另一个div中心下。

For some reason the container's boundaries won't go all the way to the bottom despite making its height 100%. Here is my code, the container is under another div center.

Html

<div id="center">
<div class="container" >
 </div>
 </div>

css

#center {   
  float:left;
  width:20%;
  margin-top:10px;
  height:100%;
}

.container {
  margin-top:3px;   
  height:100%;  
  border:2px solid #dedede; 
  width:600px;
}

推荐答案

您必须包括

body, html{
   height: 98%;
   padding: 0;
}

调整高度以消除由边距和边距引起的垂直滚动条

Play around with the height to eliminate the vertical scroll-bars caused by margins and borders on the elements contained within.

http：// jsfiddle.net/4JgA4/1/

编辑：

否则，将其设置为100％，并减小内部主要元素的高度，以消除垂直滚动条。

Otherwise, make it 100% and reduce the height of the main element inside to eliminate vertical scroll-bars.

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

#center {  
 float:left;
 width:20%;
 margin-top:10px;
 height:90%;
}

.container {
  margin-top:3px;   
  height:100%;  
  border:2px solid #dedede; 
  width:600px;
}

http://jsfiddle.net/4JgA4/3/

这篇关于设置高度100％不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！