可变高度标题下的可滚动div [英] Scrollable div beneath a variable height header

问题描述

我无法在section元素上正确滚动。 section元素不会滚动，也不会滚动，但内容或滚动条会从页面上移除。

http：// jsbin.com/EBuNonI/1/edit?html,css,output

理想情况下，标题是可变高度，该部分是浏览器的全高如果需要的话它的内容会滚动。作为一个整体的body / page不应该是可滚动的，只是部分。

这个问题显然在于它的高度为100％到头部的可变高度。如果我拿走100％高度的部分，那么我就失去了卷轴。

• 尝试不使用绝对/固定位置（移动应用程序）或JS

$ b $如果我给头一个固定的高度（不理想）并给出
padding-bottom等于固定高度的部分，那么虽然最后一个列表
项是可见的，但滚动条 b
$ b

 < div class =container> 
< header> 
< / header> 
<节> 
< ul> 
< li>第一项< / li> 
< li>上一项< / li> 
< / ul> 
< / section> 
< / div> 
  

CSS


  body，html {height：100％; } 
 body {margin：0;填充：0;溢出：隐藏; } 
 
 .container {height：100％; } 
 
部分{
 height：100％; 
 overflow-y：scroll; 
} 
  




解决方案

，这是我想出的。请看看你的想法。



HTML：





  < div class =container> 
< header>导航测试测试测试测试< / header> 
<节> 
< div> 
< ul> 
< li>第一项< / li> 
< li> 3< / li> 
< li>上一项< / li> 
< / ul> 
< / div> 
< / section> 
< / div> 
  





CSS：





  *，*：before，*：after {
 -moz-box-sizing：border-box; 
 -webkit-box-sizing：border-box; 
 box-sizing：border-box; 
} 
 body，html {
 height：100％; 
} 
 body {
 margin：0; 
 padding：0; 
 overflow：hidden; 
} 
 .container {
 height：100％; 
宽度：30％; 
 display：table; 
} 
标题{
 padding：24px; 
背景：蓝色; 
 display：table-row; 
} 
部分{
 height：100％; 
 padding：24px; 
背景：西红柿; 
 display：table-row; 
} 
 section div {
 overflow-y：scroll; 
身高：100％; 
} 
 ul {
 margin：0; 
 paddding：0; 
} 
  

我使用了 display：table; 能够使这成为可能，这样他们分享身高。





在这里试玩




I'm having trouble getting the scroll correct on the section element. The section element either doesn't scroll or does scroll but either the content or scroll bar gets pushed off the page.

http://jsbin.com/EBuNonI/1/edit?html,css,output

Ideally the header is variable height, the section is the full height of the browser and it's content scrolls if needed. The body/page as a whole shouldn't be scrollable though, just the section.

The problem obviously lies in the section having a height of 100% as it adds it to the variable height of the header. If I take away the sections 100% height then I lose the scroll.

• Trying not to use absolute/fixed positioning (mobile app) or JS

• If I give the header a fixed height (not ideal) and give the section padding-bottom equal to the fixed height then although the last list item is visible the scroll bar goes off the page.

HTML

<div class="container">
  <header>
  </header>
  <section>
    <ul>
      <li>First Item</li>
      <li>Last Item</li>
    </ul>
  </section>
</div>

CSS

body, html { height: 100%; }
body { margin: 0; padding: 0; overflow: hidden; }

.container { height: 100%; }

section { 
  height: 100%;
  overflow-y: scroll; 
}

解决方案

Had a little go at it, this is what I came up with. Take a look tell me what you think.

HTML:

<div class="container">
    <header>Navigation Testing Testing Testing Testing</header>
    <section>
        <div>
            <ul>
                <li>First Item</li>
                <li>3</li>
                <li>Last Item</li>
            </ul>
        </div>
    </section>
</div>

CSS:

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body, html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.container {
    height: 100%;
    width: 30%;
    display: table;
}
header {
    padding: 24px;
    background: blue;
    display: table-row;
}
section {
    height: 100%;
    padding: 24px;
    background: tomato;
    display: table-row;
}
section div {
    overflow-y: scroll;
    height: 100%;
}
ul {
    margin: 0;
    paddding: 0;
}

I used display:table; to be able to make this possible, that way they share the height.

DEMO HERE

这篇关于可变高度标题下的可滚动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！