在CSS表上100％的高度

我想做一个没有固定高度或宽度元素的流体布局。我的页面的主体分为三列（因为我希望它们都是相同的高度，所以我决定使用css表格）。但是，当我尝试将100％高度属性添加到表格div（或表格单元格div）时，它们不会展开为div.middle的完整大小。我已经做了JS提琴与完整的代码http://jsfiddle.net/3NMw5/这个问题，但这里是一个片段：在CSS表上100％的高度

<body> 
    <div class='titleBar'> 
     <div class='wrap'> 
      <img src='../images/logo.png' /> 
     </div> 
    </div> 
    <div class='middle'> 
     <div class='wrap mainContent'> 
       <div class='leftColumn'>left here</div> 
       <div class='center'>center</div> 
       <div class='rightColumn'>right</div> 
     </div> 
    </div> 
    <div class='footerBar'><div class='wrap'>footer</div></div> 
</body>

和CSS：

div.mainContent { display: table; height: 100%;} 
div.leftColumn { width: 20%; display: table-cell; background-color: #D2B48C; margin: 0; padding: 0;} 
div.rightColumn {width: 20%; display: table-cell;} 
div.center {width: 60%; display: table-cell;}

来源

2012-12-17 Mike

尝试增加height: 200px;到搜索Maincontent。

div.mainContent { 
display: table; 
height: 200px; 
}

Here is the jsFiddle代码。

添加height: 100%;也应该工作。

你的问题不是列没有伸展到全高，而是主内容没有完全伸展。

编辑：好的，所以当你试图让你的容器流体，因为高度是一个浏览器来计算比宽度越难真正问题就来了。

当您在父元素没有设置高度的元素上设置百分比高度时，会出现该问题。换句话说，父元素的默认高度为：auto ;.实际上，您要求浏览器根据未定义的值计算高度。由于这将等于空值，结果是浏览器什么都不做。

为了将div的高度定义为相对高度，还必须设置父元素的高度。

通过将height: 100%添加到.middle，您可以获得接近您所需的信息。 See the jsFiddle here。

了解更多关于身高问题here。

来源

2012-12-17 05:57:15 hellohellosharp

不幸的是，高度：100％不起作用（它折叠到文本的高度），我不想使用固定高度（px），因为我希望设计根据屏幕大小自动调整大小。 – Mike

是的，它有用吗？ http://jsfiddle.net/3NMw5/9/ - 将高度100％添加到mainContent。 – hellohellosharp

你的工作是因为你在div上有静态高度属性。看看这个小提琴，这是我想要完成的，只是我想用流体高度属性替换min-height：300px。 http://jsfiddle.net/3NMw5/10/ – Mike

在CSS表上100％的高度

回答

相关问题