如何使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的高度響應？

回答

相關問題