Html 如何使 CSS 中的高度响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38195295/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make height in CSS responsive?
提问by natsumiyu
I have a html like
我有一个像
<div class="container">
<div class="content-1"></div>
<div class="content-2"></div>
</div>
i want it to work like if the height of content-1is 480px, the content-2will follow the height of the content-1. My width is just working fine but my height doesn't follow.
我希望它就像如果高度的工作content-1是480px，在content-2将跟随的高度content-1。我的宽度刚刚好，但我的高度没有跟上。
How to do it in css?
如何在css中做到这一点？
my css code is
我的 css 代码是
.container{
clear: both;
}
.content-1{
width:66.66%;
position: static;
background-image: url("../images/path1");
background-repeat: no-repeat;
background-size: cover;
}
.content-2{
width:33.33%;
position: static;
background-image: url("../images/path2");
background-repeat: no-repeat;
background-size: cover;
}
采纳答案by Ramesh Vasoya
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
margin-top: 10px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
word-break: break-all;
}<div class="container flex-container">
<div class="content-1 flex-item">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
<div class="content-2 flex-item">1</div>
</div>回答by vignesh
Can you try this code:
你能试试这个代码吗：
.container {
display: table;
}
.content-1, .content-2 {
display: table-cell;
}
回答by Rohit
You can use CSS3 Flexboxin this case. containerclass will have display:flexand all your child class will set to same height.
在这种情况下，您可以使用CSS3 Flexbox。container班级将有，display:flex并且您所有的子班级都将设置为相同的高度。
.container {
display:flex;
}
.content-1 {
border:1px solid #000000;
width:50%;
height:480px;
}
.content-2 {
border:1px solid #ff0000;
width:50%;
}<div class="container">
<div class="content-1">Content 1</div>
<div class="content-2">Content 2</div>
</div>回答by frnt
Close your internal div tags.
关闭您的internal div tags.
<div class="container">
<div class="content-1"></div>
<div class="content-2"></div>
</div>
You can set height for your parent divi.e. .container:480pxas below and child elementtake that automatically as 100%.
您可以如下设置parent divie 的高度，.container:480px并child element自动将其视为100%.
.container{
width:100%;
height:480px;
}
.container > .content-1{
width:100%;
height:100%;
}
.container > .content-2{
width:100%;
height:100%;
}
(or) Use jQuery to get height of .content-1and set that for .content-2
（或）使用 jQuery 获取高度.content-1并将其设置为.content-2
$(document).ready(function(){
var height = $(".container > .content-1").css("height");
$(".container > .content-2").css({
height : height,
background : "#f22"
});
});
回答by Pratik Deshmukh
Try using display table :
尝试使用显示表：
.container {
display: table;
height: 480px;
}
.content-1 {
display:table-cell;
float: none;
width: 50%;
height: 100%;
}
.content-2 {
display: table-cell;
float: none;
width: 50%;
height: 100%;
}
回答by Chien Vu Hoang
you need add more 1 class to that:
您需要添加更多 1 个类：
.height{
height: 100px;
}<div class="container">
<div class="content-1 height">
<div class="content-2 height">
</div>