如何制作漂浮的div和相等的高度

Question

首先，這是我的網頁代碼

 @import url("reset.css"); @import url('https://fonts.googleapis.com/css?family=Raleway'); * { box-sizing:border-box; } body { background-color: #9E9E9E; } #wrapper { width:95%; max-width:980px; margin: 0 auto; font-family: 'Raleway', sans-serif; line-height: 2rem; } .header { padding:18px; background-color: #757575; border-radius:5px; width:100%; margin-top:5px; margin-bottom:5px; } .column_left { float:left; padding:18px; width:70% ; background-color:#607D8B; border-top-left-radius: 5px; border-bottom-left-radius:5px; } .column_right { float:right; padding:18px; width:29.99%; background-color:#455A64; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } /*For Screens 750 PX or less (width)*/ @media screen and (max-width:750px) { .header { text-align:center; } .column_right { display:none; } .column_left { width:100%; border-radius:5px; } } h1 { font-size:1.8rem; } h2 { font-size: 1.4rem; } p { } nav {} nav ul {} nav ul li { width:100%; background-color:#607D8B; text-align:center; padding:2.5px; border-radius:5px; margin-bottom:5px; } nav ul li a { color:#455A64; } footer { padding:18px; background-color: #757575; border-radius:5px; width:100%; margin-top:5px; margin-bottom:5px; float:none; display:flex; } 

 <meta name="viewport" content="width=device-width, user-scalable=no"> <div id="wrapper"> <h1 class="header">Lorem Ipsum</h1> <div class="column_left"> <h2>Welcome to Lorem Ipsum</h2> <p>Aenean nec vestibulum justo, ut aliquet ante. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Etiam viverra interdum neque, sed sagittis lectus sodales sit amet.</p> <p>Maecenas posuere laoreet auctor. Integer vel nulla ut magna interdum consectetur.</p> <p>Vestibulum non ligula sed diam luctus tincidunt in sit amet metus.</p> </div> <div class="column_right"> <h2>Navigation</h2> <nav> <ul> <li><a class="button" href="#">Link</a></li> <li><a class="button" href="#">Link</a></li> <li><a class="button" href="#">Link</a></li> </ul> </nav> </div> <footer> &copy; 2016 Ipsum Lorem </footer> </div> 

基本上我想讓column_left和column_right類具有相同的高度，而不使用height=100% 。 該網站將有多個頁面，其他頁面的長度可能與示例頁面不同。 這是我到目前為止所得到的圖像：

基本上，我希望導航div與旁邊的導航div一樣高。

Answer 1

如果flexbox是一個選項，你可以給：

display: flex;
flex-wrap: wrap;

wrapper ，這將修復高度 - 見下面的演示：

 @import url("reset.css"); @import url('https://fonts.googleapis.com/css?family=Raleway'); * { box-sizing: border-box; } body { background-color: #9E9E9E; } #wrapper { width: 95%; max-width: 980px; margin: 0 auto; font-family: 'Raleway', sans-serif; line-height: 2rem; display: flex; flex-wrap: wrap; } .header { padding: 18px; background-color: #757575; border-radius: 5px; width: 100%; margin-top: 5px; margin-bottom: 5px; } .column_left { float: left; padding: 18px; width: 70%; background-color: #607D8B; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .column_right { float: right; padding: 18px; width: 29.99%; background-color: #455A64; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } /*For Screens 750 PX or less (width)*/ @media screen and (max-width: 750px) { .header { text-align: center; } .column_right { display: none; } .column_left { width: 100%; border-radius: 5px; } } h1 { font-size: 1.8rem; } h2 { font-size: 1.4rem; } p {} nav {} nav ul {} nav ul li { width: 100%; background-color: #607D8B; text-align: center; padding: 2.5px; border-radius: 5px; margin-bottom: 5px; } nav ul li a { color: #455A64; } footer { padding: 18px; background-color: #757575; border-radius: 5px; width: 100%; margin-top: 5px; margin-bottom: 5px; float: none; display: flex; } 

 <div id="wrapper"> <h1 class="header">Lorem Ipsum</h1> <div class="column_left"> <h2>Welcome to Lorem Ipsum</h2> <p>Aenean nec vestibulum justo, ut aliquet ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Etiam viverra interdum neque, sed sagittis lectus sodales sit amet.</p> <p>Maecenas posuere laoreet auctor. Integer vel nulla ut magna interdum consectetur.</p> <p>Vestibulum non ligula sed diam luctus tincidunt in sit amet metus.</p> </div> <div class="column_right"> <h2>Navigation</h2> <nav> <ul> <li><a class="button" href="#">Link</a> </li> <li><a class="button" href="#">Link</a> </li> <li><a class="button" href="#">Link</a> </li> </ul> </nav> </div> <footer> &copy; 2016 Ipsum Lorem </footer> </div> 

Answer 2

如果你不能使用flexbox ，這是推薦的方式，而你不想要腳本，這里有兩個選項：

1. 由於float: right和position: absolute都將元素從流中取出（以他們自己的方式），如果左列總是更高，后者將解決您的問題。 使用添加的包裝器（ columns ），它可能看起來像這樣

 @import url("reset.css"); @import url('https://fonts.googleapis.com/css?family=Raleway'); * { box-sizing:border-box; } body { background-color: #9E9E9E; } #wrapper { width:95%; max-width:980px; margin: 0 auto; font-family: 'Raleway', sans-serif; line-height: 2rem; } .header { padding:18px; background-color: #757575; border-radius:5px; width:100%; margin-top:5px; margin-bottom:5px; } .columns { position: relative; } .columns::after { content: ''; display:block; clear:both; } .column_left { float:left; padding:18px; width:70% ; background-color:#607D8B; border-top-left-radius: 5px; border-bottom-left-radius:5px; } .column_right{ position: absolute; top: 0; right: 0; padding:18px; width:30%; background-color:#455A64; border-top-right-radius: 5px; border-bottom-right-radius: 5px; height: 100%; } /*For Screens 750 PX or less (width)*/ @media screen and (max-width:750px) { .header { text-align:center; } .column_right { display:none; } .column_left { width:100%; border-radius:5px; } } h1 { font-size:1.8rem; } h2 { font-size: 1.4rem; } p { } nav {} nav ul {} nav ul li { width:100%; background-color:#607D8B; text-align:center; padding:2.5px; border-radius:5px; margin-bottom:5px; } nav ul li a { color:#455A64; } footer { padding:18px; background-color: #757575; border-radius:5px; width:100%; margin-top:5px; margin-bottom:5px; float:none; display:flex; } 

 <meta name="viewport" content="width=device-width, user-scalable=no"> <div id="wrapper"> <h1 class="header">Lorem Ipsum</h1> <div class="columns"> <div class="column_left"> <h2>Welcome to Lorem Ipsum</h2> <p>Aenean nec vestibulum justo, ut aliquet ante. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Etiam viverra interdum neque, sed sagittis lectus sodales sit amet.</p> <p>Maecenas posuere laoreet auctor. Integer vel nulla ut magna interdum consectetur.</p> <p>Vestibulum non ligula sed diam luctus tincidunt in sit amet metus.</p> </div> <div class="column_right"> <h2>Navigation</h2> <nav> <ul> <li><a class="button" href="#">Link</a></li> <li><a class="button" href="#">Link</a></li> <li><a class="button" href="#">Link</a></li> </ul> </nav> </div> </div> <footer> &copy; 2016 Ipsum Lorem </footer> </div> 

---

2. 使用display: table 。 使用添加的包裝器（ columns ），它可能如下所示：
   （在上面之前我贊成這個，因為它是動態的，並且無論哪一個更高，都保持兩個列都相等。）

 @import url("reset.css"); @import url('https://fonts.googleapis.com/css?family=Raleway'); * { box-sizing:border-box; } body { background-color: #9E9E9E; } #wrapper { width:95%; max-width:980px; margin: 0 auto; font-family: 'Raleway', sans-serif; line-height: 2rem; } .header { padding:18px; background-color: #757575; border-radius:5px; width:100%; margin-top:5px; margin-bottom:5px; } .columns { display: table; width: 100%; } .column_left { display: table-cell; padding:18px; width:70%; background-color:#607D8B; border-top-left-radius: 5px; border-bottom-left-radius:5px; } .column_right{ display: table-cell; padding:18px; width:30%; background-color:#455A64; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } /*For Screens 750 PX or less (width)*/ @media screen and (max-width:750px) { .header { text-align:center; } .column_right { display:none; } .column_left { width:100%; border-radius:5px; } } h1 { font-size:1.8rem; } h2 { font-size: 1.4rem; } p { } nav {} nav ul {} nav ul li { width:100%; background-color:#607D8B; text-align:center; padding:2.5px; border-radius:5px; margin-bottom:5px; } nav ul li a { color:#455A64; } footer { padding:18px; background-color: #757575; border-radius:5px; width:100%; margin-top:5px; margin-bottom:5px; float:none; display:flex; } 

 <meta name="viewport" content="width=device-width, user-scalable=no"> <div id="wrapper"> <h1 class="header">Lorem Ipsum</h1> <div class="columns"> <div class="column_left"> <h2>Welcome to Lorem Ipsum</h2> <p>Aenean nec vestibulum justo, ut aliquet ante. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Etiam viverra interdum neque, sed sagittis lectus sodales sit amet.</p> <p>Maecenas posuere laoreet auctor. Integer vel nulla ut magna interdum consectetur.</p> <p>Vestibulum non ligula sed diam luctus tincidunt in sit amet metus.</p> </div> <div class="column_right"> <h2>Navigation</h2> <nav> <ul> <li><a class="button" href="#">Link</a></li> <li><a class="button" href="#">Link</a></li> <li><a class="button" href="#">Link</a></li> </ul> </nav> </div> </div> <footer> &copy; 2016 Ipsum Lorem </footer> </div> 

Answer 3

根據這個類似的問題，您可以使用JavaScript實現此目的。

document.getElementsByClassName("column_left")[0].style.height = document.getElementsByClassName("column_right")[0].style.height;

這會將左列的高度設置為右列的高度。 您可以切換代碼，也可以使用問題的答案。