0

我正在为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 的边框似乎只有一些有限的距离，就像 在此处输入图像描述 我需要那个背景和边框作为 100% 高度的问题一样。

4

2 回答 2

1

Remove height:100% from your body and html style.

Instead of having a border set to the left container, try setting the border on the content container instead.

your css would be something like:

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

the left column is currently set to 100% and renders correctly. the problem is that it doesnt take into account the overflow content you cannot see, until you scroll. The other solution would be to absolute or fixed position the left container, and set its top and bottom values to 0.

css for that would be something like:

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

Here's a really basic layout with a fixed left column - http://jsfiddle.net/WAJtk/

and a version with a fixed header too - http://jsfiddle.net/WAJtk/1/

you might also like this pen - http://codepen.io/lukeocom/pen/KqAfG

于 2013-07-31T07:51:11.240 回答
0

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

body {
     position: absolute;
     top: 0;
     bottom: 0;
}
于 2013-07-31T07:40:27.330 回答