1/3和2/3区块3/3的css3垂直划分
1/3和2/3区块3/3的css3垂直划分
提问于 2014-02-07 21:38:36
我以为我能用这个，但是我找不到任何关于这个的信息。我试着用flexbox搜索垂直布局，但没能成功。
基本上，我想要的是以下场景：
我有3/3的高度，我想用css (如果可能的话)将它分成2部分，一个部分占1/3，另一部分占2/3。
_______
| 1/3 |
-------
| 2/3 |
| |
-------我知道我可以用javascript来做这件事，这就是我目前正在做的事情，但是我认为css3带来了这种可能性，还是我错了？
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-02-07 21:44:00
将body和html的高度设置为100%，然后将每个元素设置为所需的高度。加入overflow: hidden以防止div的生长。垂直边距会破坏这个布局，所以使用填充。
演示
CSS：
body, html {
height: 100%;
}
.top {
height: 33.3333%;
overflow: hidden;
background: blue;
}
.bottom {
height: 66.6666%;
overflow: hidden;
background: green;
} Stack Overflow用户
发布于 2014-02-07 21:48:12
实现这一点的另一种方法是使用position:absolute;，它允许您将这个1-2/3 div用作身体的直接子代。参见此JSFiddle
body{margin:0;padding:0;}
.container{position:absolute;height: 100%;background-color:green;}
.ot{height: 33%;background-color:red;}
.tt{height:67%;background-color:yellow;}例如，将height of .container设置为300px以查看效果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21638216
复制相关文章
相似问题
腾讯云开发者
