如何使CSS的高度响应？

我有这样如何使CSS的高度响应？

<div class="container"> 
    <div class="content-1"></div> 
    <div class="content-2"></div> 
</div>

一个HTML我希望它像如果content-1高度为480px工作，content-2将遵循content-1的高度。我的宽度工作正常，但我的身高并没有跟随。

如何在css中做到这一点？

我的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; 
}

来源

2016-07-05 natsumiyu

.. AAA和容器就像100％的高度？我的意思是......什么意思*“将跟随”*的高度？ –

你能否显示你的CSS代码？ –

你的2个'div'没有关闭。你说你想让'content-2'拥有'content-1'的相同高度？ –

\t 
 
.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>

来源

2016-07-05 05:25:43

请尽量避免将代码转储为答案，并尝试解释它的作用和原因。对于那些没有太多编码经验的人来说，你的代码可能并不明显。 – Frits

现在让我们使用更多的属性。考虑一个包含6个项目的清单，所有清单都有一个固定的尺寸，但它们可以自动调整大小。我们希望它们在横轴上平均分配很好，这样当我们调整浏览器的大小时，一切都很好 –

-1

你需要添加更多的1级到：

.height{ 
 
    height: 100px; 
 
}

<div class="container"> 
 
    <div class="content-1 height"> 
 
    <div class="content-2 height"> 
 
</div>

来源

2016-07-05 04:44:52

你可以试试这个代码：

.container { 
    display: table; 
} 
.content-1, .content-2 { 
    display: table-cell; 
}

来源

2016-07-05 04:50:37 vignesh

'content-2'之前缺少一个点 –

.container { 
 
    display: flex; 
 
    border: 2px solid red; 
 
} 
 

 
.content-1, .content-2 { 
 
    flex: 1; 
 
    background-color: grey; 
 
    border: 1px solid black; 
 
}

<div class="container"> 
 
<div class="content-1">Content 1 <br> Has more text than content 2</div> 
 
<div class="content-2">Content 2</div> 
 
</div>

来源

2016-07-05 04:55:41

您可以在此情况下，使用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>

来源

2016-07-05 04:58:28 Rohit

'display：flex;'做什么？ – natsumiyu

它支持弹性上下文。它对齐和分配容器中的物品之间的空间。详细了解Flexbox：[https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to -flexbox /） – Rohit

当我尝试使用'flex'时，我的'div'变小了。 – natsumiyu

闭上你的internal div tags。

<div class="container"> 
    <div class="content-1"></div> 
    <div class="content-2"></div> 
</div>

您可以为parent div即.container:480px下面和child element取点自动100%设置高度。

.container{ 
width:100%; 
height:480px; 
} 

.container > .content-1{ 
width:100%; 
height:100%; 
} 

.container > .content-2{ 
width:100%; 
height:100%; 
}

（或）使用jQuery获得.content-1高度，并设置为.content-2

$(document).ready(function(){ 
var height = $(".container > .content-1").css("height"); 
$(".container > .content-2").css({ 
height : height, 
background : "#f22" 
}); 
});

来源

2016-07-05 05:01:22 frnt

不是使用脚本来实现响应高度的好方法。因为有很多方法可以使用CSS来实现这一点。 –

@VivekVikranth好的，但这是其中的一个选项。而flex在这类问题上完美。 – frnt

尝试使用显示表：

.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%; 
}

来源

2016-07-05 05:17:49

如何使CSS的高度响应？

回答

相关问题