如何制作漂浮的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），它可能看起来像这样
＆＃13;
＆＃13;
@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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;
1. 使用display: table。使用添加的包装器（columns），它可能如下所示：
   （在上面之前我赞成这一点，因为它是动态的，并且无论哪一列更高，都要保持两列相等。）
＆＃13;
＆＃13;
@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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 3

每this similar question,您可以使用JavaScript实现此目的。

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

这会将左列的高度设置为右列的高度。您可以切换代码，也可以使用问题的答案。