html - body 及其子元素的高度为100％

我为body指定背景颜色，该背景颜色仅显示特定距离。我需要它全高并且也需要它的子元素。其子元素之一具有border-right，它也需要在全屏高度上显示。

我的CSS看起来更好（示例一），请检查我的演示

demo page

   html,body {
         height: 100%;
         background-color: #fefefe;
    }
    .cover {
         height: 100%;
    }
    .left_side {
        float: left;
        height: 100%;
        border-left: 1px solid #ccc;
        width: 31%;
    }

和html是

     <body>
         <div class="cover">
            <div class="left_side">
            </div>
         </div>
      </body>

而bgcolor和childs的边界似乎只有有限的距离，就像

那是什么问题，我需要100％高度的背景和边框。

最佳答案

从您的身体和html样式中删除高度：100％。

与其在边框上设置边框，不如在内容容器上设置边框。

你的CSS将是这样的：

.large-9 .columns .right_side{border-left:1px solid #333;}

左列当前设置为100％，并且可以正确呈现。问题在于，它不会考虑您滚动之前看不到的溢出内容。另一种解决方案是将左侧容器绝对或固定在其位置，并将其顶部和底部值设置为0。

CSS的将是这样的：

.left_side .full_height{position:fixed;top:0;bottom:0;width:200px;}

这是一个非常基本的布局，带有固定的左列-http://jsfiddle.net/WAJtk/

以及带有固定标题的版本-http://jsfiddle.net/WAJtk/1/

您可能还会喜欢这支笔-http://codepen.io/lukeocom/pen/KqAfG

关于html - body 及其子元素的高度为100％，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17964315/