Question

我有两个div并排。左侧的div是基本导航。右边的div是一篇文章。我希望左边的div是视口的高度，右边的div是隐藏任何比左边的div更长的东西（最终目标是有一个棒侧栏，占据了1/3的屏幕）。我考虑过使用flexbox，但之前没有使用它，也不确定这是否是最好的方法。

我尝试将左侧div的高度设置为100vh，如本文所述：Make div 100% height of browser window但它不起作用。我已经看到了关于使用表格的建议，但更愿意避免使用它们。我已经看到了一些关于使用jquery和正确的div基于左边调整大小的建议，但这似乎有点复杂然后是必要的。

注意：我见过的关于匹配div高度的大多数文章似乎都倾向于使较小的div匹配较大的div的高度。我的问题恰恰相反。我希望较大的div匹配较小的div的高度并隐藏任何额外的内容。不过我对任何建议持开放态度。

<doctype="HTML">
<html>
<head>
  <title>Web Hosting Issues</title>
  <style>@import url('https://fonts.googleapis.com/css?family=Open+Sans');
  </style>
</head>

<body>
  <header>
    <div id="logo">
     <a href="home">
       <h1>Website</h1>
       <img>
     </a>
    </div>
    <navigation>
      <ul>
        <div class="nav-row">
          <li id="site-down">
            <a href="site-down-url">
              <img>Site Down
            </a>
          </li>
          <li id="wordpress">
            <a href="wordpress-url">
              <img>Wordpress
            </a>
          </li>
        </div>
        <div class="nav-row">
          <li id="migrations">
            <a href="migrations-url">
              <img>Migrations
            </a>
          </li>
          <li id="backups">
            <a href="backups-url">
              <img>Backups
            </a>
          </li>
        </div>
        <div class="nav-row">
           <li id="databases">
               <img>Databases
             </a>
           </li>
           <li id="domains">
             <a href="domains-url">
               <img>Domain
             </a>
           </li>
        </div>
      </ul>
    </navigation>
    <div id="contact-us">
      <a href="contact-form">
        <img>
        <div>
          <h2>Have Us Fix It</h2>
          <button id="contact-button">Contact Us</button>
        </div>
      </a>
    </div>
  </header>


    <article>
      <h1>Article Title</h1>
      <p>Lorem ipsum dolor sit amet, mei hinc graeci vituperatoribus et. Pri stet copiosae mediocrem eu. Mollis inimicus mel id, mutat mentitum vix an. No pro virtute intellegam, ea has epicurei referrentur, posse oporteat ius ei.</p>

  <p>Libris appellantur et pro. Insolens ocurreret salutatus et sit. Mei ea aeque ludus aliquando, at hinc ponderum comprehensam cum. Eu nam mandamus expetenda dissentiunt, probo tacimates at eos, no everti docendi sed. Id appetere democritum nam.</p>

  <p>Odio animal aperiam ea sit. Debet accumsan ne pro, eos simul perfecto invenire ea. Per ea quaestio consulatu. Eos vide repudiare id, mei cu ridens possim assentior, te probo intellegat vim. Has etiam incorrupte an. Id oratio verear audire mei, reque tincidunt duo ex.</p>

  <p>Eum erant putant vocent ei. At dico exerci quo. Pri melius ocurreret persequeris in, eu noster virtute est. Aeque commodo ut duo. In sit melius dignissim, te has lorem minimum consectetuer.</p>

  <p>Pri oratio vocibus vituperatoribus te, dolores persecuti sit ut. Esse munere eam ea, possim mentitum moderatius nec at. Doming gubergren ut mei, luptatum salutatus scriptorem mei an. Nec partem ponderum assueverit cu, veri erat libris his ad, ad vidisse docendi ius. At everti dolores disputationi vel, nec cu diceret eleifend. Pri cu falli erant, tamquam democritum ad sit, vis illum inani in. Apeirian nominati sed at, ei atomorum accommodare usu, has modus definitionem te.</p>
    </article>

  </body>
  </html>


body {
  font-family: 'Open Sans', sans-serif;
  display: flex;
}

img {
  max-width: 100%;
  display: block;
  margin: auto;
}
header { 
  float: left;
  width: 50%;
}

header a {
  text-decoration: none;
}

#logo, #contact-us {
  background: #074f7b;
  padding: 0.5em;
}

#logo h1 { 
  display: inline-block;
  text-align: center;
  font-family: sans-serif;
  color: white;
  float: left;
  width: 68%;
}

#logo img {
  float: left;
  width: 30%;
  padding-left: .4em;
  color: white;
}


#logo::after{
  content: " ";
  display: block; 
  height: 0; 
  clear: both;
}
navigation {}

navigation:after {
  visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

navigation ul {
  margin: 0;
  padding: 0;
}

.nav-row {}

.nav-row li {
  width: 50%;
  float: left;
  display: inline-block;
  min-height: 100px;
}

.nav-row a {
  display: block;
  padding: .5em;
  text-align: center;
  color: black;
}

.nav-row a:hover {
  color: white;
}

#site-down {
  background: #ffc219;
}

#wordpress {
  background: #8f73b4;
}

#migrations {
  background: #0778bb;
}

#backups {
  background: #f06f26;
}

#databases {
  background: #764821;
}

#domains {
  background: #59bb53;
}

#contact-us h1, #contact-us img{
  color: white;
}

#contact-us {
  text-align: center;
}

#contact-us img {
  float: left;
  width: 45%;
  text-align: center;
  padding: 0 .5em
}

#contact-us div {
  width: 50%;
  float: left;
  text-align: center;
}

#contact-us h2 {
  color: white;
  margin: 0em 0em .5em 0em;
  padding-left: 0.625em

}
#contact-us::after{
  content: " ";
  display: block; 
  height: 0; 
  clear: both;
}

#contact-us button {
  background: #8f73b4;
  border-radius: .6em;
  border: 1px solid #8f73b4;
  color: white;
}

article {
  float: right;
  width: 50%;

}

article h1, article p {
  margin: 1.563em;
}

article h1 {
  text-align: center;
}

Answer 1

您只需position:fixed;左侧菜单：

/*QuickReset*/*{box-sizing:border-box; margin:0;}html,body{height:100%;}

#menu{
  position:fixed;
  background: #8F73B4;
  height:100%;
  width: 33.333%;
}

#page{
  margin-left:33.333%;  /* matches the menu width */
  height: 2000px;       /* test: just to add scrollbars */
}

<div id="menu"> MENU BOXES HERE </div>
<div id="page"> PAGE CONTENT HERE </div>

与菜单元素/框相比，我选择 flexbox

<强> JSBin demo

/*QuickReset*/
*{box-sizing:border-box;margin:0;}
html,body{height:100%;font:14px/1.4 sans-serif;}

.flex-col{
  display: flex;
  flex-flow: column wrap;
}
.flex-row{
  display: flex;
  flex-flow: row wrap;
}
.grow{
  flex: 1;
}

img{
  max-width:100%;
  vertical-align:top;
}

#menu{
  position:fixed;
  background: #8F73B4;
  height:100%;
  width: 33.333%;
}

#page{
  margin-left:33.333%;  /* matches the menu width */
  height: 2000px;       /* test: just to add scrollbars */
}

<div id="menu" class="flex-col">
  
  <header>header</header>
  
  <div class="flex-row grow">
    <div class="grow">1</div>
    <div class="grow">2</div>
  </div>
  
  <div class="flex-row grow">
    <div class="grow">3</div>
    <div class="grow">4</div>
  </div>
  
  <footer>footer</footer>
  
</div>
  
  
<div id="page">
  <h1>PAGE CONTENT HERE</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At recusandae explicabo numquam molestiae, debitis eius deserunt cum necessitatibus aspernatur. Excepturi omnis, tenetur nihil voluptatibus hic incidunt doloribus itaque delectus dolorum!</p>
</div>

P.S：<navigation> 不是HTML5元素。您可能希望使用<nav>作为语义。

Div匹配较小兄弟的高度

1 个答案: