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

问题描述 投票:1回答:3

首先,这是我的网页代码

@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_leftcolumn_right类相同的高度,而不使用height=100%。该网站将有多个页面,其他页面的长度可能与示例页面不同。这是我到目前为止所得到的图像:

enter image description here

基本上,我希望导航div与旁边的导航div一样高。

html css css3 css-float
3个回答
2
投票

如果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>

1
投票

如果您不能使用flexbox,这是推荐的方式,并且您不需要脚本,这里有2个选项:

  1. 由于float: rightposition: 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>

  1. 使用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>

0
投票

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.