gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 14:44:51 26 4
gpt4 key购买 nike

我正在为 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 边界似乎只有一些有限的距离 enter image description here伙计们,我需要那个背景和边框作为 100% 高度的问题是什么。

最佳答案

从您的 body 和 html 样式中删除 height: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/

还有一个带有固定 header 的版本 - http://jsfiddle.net/WAJtk/1/

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

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

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com