Question

我正在开发一个具有如下常规布局的Web应用程序：

主要内容区域超出视口底部。用户可以通过单击按钮打开侧面导航菜单。我的问题是，是否有一种聪明的方法让侧导航高度延伸到视口的底部？我知道我可以用javascript做到这一点，我必须计算视口的高度，然后减去标题和子标题高度...但是想知道是否有一种更容易的方法，我错过了？

Answer 1

以下是使用flex属性的示例。如果您不知道使用flex here's a great example进行布局。只需将容器设置为display: flex;，将侧面导航设置为flex: 0 auto;：

＆＃13;

.header,
.subheader {
  background: #5b5;
  width: 200px;
  height: 50px;
  margin: 0 auto;
  text-align: center;
}
.header {
  background: #5b5;
}
.subheader {
  background: #292;
}
.content {
  width: 200px;
  margin: 0 auto;
  display: flex;
}
.nav {
  flex: 0 auto;
  width: 25%;
  background: #55b;
  float: left;
  height: inherit;
}
.main {
  width: 75%;
  background: #449;
  float: right;
}

＆＃13;

<div class="header">Header</div>
<div class="subheader">Subheader</div>
<div class="content">
  <div class="nav">side nav</div>
  <div class="main">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>

＆＃13;

Answer 2

您可以使用calc()并从100vh中减去标题和子标题高度。例如：

height: calc(100vh - 200px);

Answer 3

如果标题和副标题的高度是固定的，你可以试试这样的东西。比方说，他们的身高都是50像素。

#side-nav { 
   height: calc(100vh - 100px) 
}

Answer 4

嘿，我可以帮你解决问题你可以单独使用css来修复这个模板，最好使用css而不是js。

解决方案

html是..

<html>
    <link rel="stylesheet" href="style.css"/>
    <body>
    <header class="border"><h1>Header</h1></header>
    <section class="sub-header border"><h2>Sub header</h2></section>
    <div class="side-menu border">
      <div class="menu-head"><h3>Menu heading</h3></div>
    <div class="menu-items ">
        <p>Menu items 1</p>
        <p>Menu items 2</p>
        <p>Menu items 3</p>
        <p>Menu items 4</p>
        </div>  
    </div>
    <div class="main-content border">
     <p>Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet. Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet.</p>
    </div>
    </body>
</html>

CSS是..

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
    overflow: auto;
}
.border{
    border: 1px solid #000;
}
header{
    text-align: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background: #ea4242;
}
.sub-header{
    text-align: center;
    position: fixed;
    left: 0;
    top: 39px;
    width: 100%; 
    background: #d46b6b;
}
.side-menu{
width: 240px;
    position: fixed;
    left: 0;
    top: 68px;
    height: 89%;


}
.menu-head{
    width:100%;
    text-align: center;
    padding: 12px 0;
    background: #96a2ff;
}
.menu-items{
    height: 100%;
}
.menu-items p{
    padding: 20px 10px;
    border-bottom:1px solid #777; 
}
.main-content{
    height: 1900px;
    width: calc(100% - 252px);
    margin-left: 240px;
    margin-top: 66px;
    background: #fdefa9;
    padding: 0 0px 0 10px;    
}

试试这个最适合你的方式

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
    overflow: auto;
}
.border{
    border: 1px solid #000;
}
header{
    text-align: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background: #ea4242;
}
.sub-header{
    text-align: center;
    position: fixed;
    left: 0;
    top: 39px;
    width: 100%; 
    background: #d46b6b;
}
.side-menu{
width: 240px;
    position: fixed;
    left: 0;
    top: 68px;
    height: 89%;
    overflow:auto;
overflow:auto;

    
}
.menu-head{
    width:100%;
    text-align: center;
    padding: 12px 0;
    background: #96a2ff;
}
.menu-items{
    height: 100%;
}
.menu-items p{
    padding: 20px 10px;
    border-bottom:1px solid #777; 
}
.main-content{
    height: 1900px;
    width: calc(100% - 252px);
    margin-left: 240px;
    margin-top: 66px;
    background: #fdefa9;
    padding: 0 0px 0 10px;    
}

<header class="border"><h1>Header</h1></header>
    <section class="sub-header border"><h2>Sub header</h2></section>
    <div class="side-menu border">
      <div class="menu-head"><h3>Menu heading</h3></div>
    <div class="menu-items ">
        <p>Menu items 1</p>
        <p>Menu items 2</p>
        <p>Menu items 3</p>
        <p>Menu items 4</p>
        </div>  
    </div>
    <div class="main-content border">
     <p>Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet. Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet.</p>
    </div>

Answer 5

Yves，通常我们这样做：

git help glossary

然而，除非我们在主体和html中添加100％的高度，否则这将无法工作，这不是很优雅，可能会破坏你的设计的其余部分。用vh这很容易。只需将其高度设置为100vh，它将始终与窗口一样高。

#elem{
    height: 100%;
}

这对于那些看起来很时髦的全屏英雄形象来说是完美的。

参考： http://tutorialzine.com/2015/05/simplify-your-stylesheets-with-the-magical-css-viewport-units/

希望这有帮助！

如何在没有Javascript的情况下将DIV的高度设置为视口底部？

5 个答案: