blocks|key|4054522|text|你可以试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4054523|height:+100vh;|offset|length|style|CODE|4054524|请记住，height:+100%25填充的高度是其父容器的100%25。如果父容器没有到达底部，那么左栏就无法到达底部。|4054525|entityMap^0|0|0|E|0|4|C|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|K|$]]

<p>You could try </p>

<p><code>height: 100vh;</code></p>

<p>Remember <code>height: 100%</code> is filling 100% height of its parent container. If the parent container isn't reaching the bottom, then the leftbar can't.</p>


blocks|key|4054293|text|满足您的需求的关键点是使用：height:+100vh|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4054294|但是，您必须意识到，如果sidebar的内容比sidebar容器长，那么当您向下滚动到100vh上时，sidebar背景将会丢失。|4054295|所以，使用min-height:+100vh更好。|4054296|希望这能有所帮助。|4054297|​|4054298|*+{
++box-sizing:+border-box;
}
.container::after+{
++display:+table;
++content:+"";
++clear:+both;
}

.sidebar+{
++float:+left;
++width:+200px;
++min-height:+100vh;
++background:+#f0f0f0;
++border:+1px+solid+#ededed;
}

.main-container+{
++padding:+20px;
++height:+1200px;
++float:+left;
++width:+calc(100%25+-+200px);
++background:+#ddd;
}

.footer+{
++background:+yellow;
++padding:+20px;
}|code-block|syntax|javascript|4054299|<div+class="container">
++<div+class="sidebar">
++++<ul>
++++++<li><a+href="#">Item+1</a></li>
++++++<li><a+href="#">Item+2</a></li>
++++++<li><a+href="#">Item+3</a></li>
++++++<li><a+href="#">Item+1</a></li>
++++++<li><a+href="#">Item+2</a></li>
++++++<li><a+href="#">Item+3</a></li>
++++++<li><a+href="#">Item+1</a></li>
++++++<li><a+href="#">Item+2</a></li>
++++++<li><a+href="#">Item+3</a></li>
++++++<li><a+href="#">Item+1</a></li>
++++++<li><a+href="#">Item+2</a></li>
++++++<li><a+href="#">Item+3</a></li>
++++</ul>
++</div>
++<div+class="main-container">
++++This+main+container+is+very+long.
++</div>
</div>
<div+class="footer">
++Yay!+you+found+footer.
</div>|4054300|4054301|entityMap^0|E|D|0|C|7|N|7|17|5|1F|7|0|5|H|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1C|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1D|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|1E|8|@]|D|@]|E|$Q|R]]|$1|S|3|T|5|P|7|1F|8|@]|D|@]|E|$Q|R]]|$1|U|3|M|5|6|7|1G|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|W|$]]

<p>The key point to cover your need  is using: <code>height: 100vh</code></p>

<p>However, you have to aware that if the content of <code>sidebar</code> is longer than <code>sidebar</code> container, <code>sidebar</code> background will be missing when you scroll down over <code>100vh</code>. </p>

<p>So, using <code>min-height: 100vh</code> is better.</p>

<p>Hope this helps.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  box-sizing: border-box;
}
.container::after {
  display: table;
  content: "";
  clear: both;
}

.sidebar {
  float: left;
  width: 200px;
  min-height: 100vh;
  background: #f0f0f0;
  border: 1px solid #ededed;
}

.main-container {
  padding: 20px;
  height: 1200px;
  float: left;
  width: calc(100% - 200px);
  background: #ddd;
}

.footer {
  background: yellow;
  padding: 20px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;div class="sidebar"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="main-container"&gt;
    This main container is very long.
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="footer"&gt;
  Yay! you found footer.
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I am trying to make a <code>&lt;div&gt;</code> stretch to the bottom of the page.
I want this <code>&lt;div&gt;</code> to be something like a bar all along the left side of my page. It does stretch along the left side when I open the page but when I'm scrolling down it won't stretch anymore.
The thing is I have multiple <code>&lt;div&gt;</code>s wrapped inside one another, but this one I am talking about is child only of <code>&lt;html&gt;</code> and <code>&lt;body&gt;</code> elements.
I tried a lot of things to make it work properly but <code>height:auto;</code>, <code>height:100%;</code> or <code>height:inherit;</code> don't seem to work, but it works if I use <code>height:000px;</code>.
I should also mention that both <code>&lt;html&gt;</code> and <code>&lt;body&gt;</code> have <code>height:100%;</code> and <code>width:100%;</code>.</p>

<p>The code looks like this:</p>

<pre><code>  .leftbar {
    background-color: rgba(0,0,0,0.85);
    width: 10%;
    height: 100%;
    float: left;
    position: relative;
    left: 0;
    margin-top:0;
    bottom:0;
    right:0;
    overflow: hidden;
}
</code></pre>

<p>What confuses me even more is that I also have a footer on the bottom side of my page but it works great. It stretches as much as I need it to.
The code for it looks like this:</p>

<pre><code>.footer {
    background-color: rgba(0,0,0,0.85);
    width: 100%;
    height: 50px;
    position: relative;
    bottom: 0;
}
</code></pre>

<p>Could you tell me pls why that left side bar won't stretch?</p>


Div won't stretch to the bottom of the page

容器

我正在尝试让<div>延伸到页面的底部。我希望这个<div>是我页面左侧的一个类似条的东西。当我打开页面时，它确实会沿着左侧伸展，但当我向下滚动时，它就不再伸展了。问题是我有多个<div>相互包装在一起，但我说的这个元素只是<html>和<body>元素的子元素。我尝试了很多方法来让它正常工作，但height:auto...

问Div不会延伸到页面底部
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Div不会延伸到页面底部EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Div不会延伸到页面底部
EN