Question

我正在为body指定背景颜色，仅显示一定距离。我需要它是全高度和它的子元素。其中一个子元素border-right也需要在整个屏幕高度上显示。

我的CSS看起来像（样本一）更好地检查我的演示

   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边界似乎只有一些有限的距离 enter image description here 那个问题我们需要那个背景和边框为100％的高度。

Answer 1

移除身高：100％来自你的身体和html风格。

不要将边框设置为左侧容器，而是尝试在内容容器上设置边框。

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

Answer 2

您可以使用绝对位置并设置顶部和底部：

body {
     position: absolute;
     top: 0;
     bottom: 0;
}

身体及其子元素的高度为100％

2 个答案: