自动高度DIV具有溢出和滚动需要时(Auto height div with overflow an

2019-06-23 14:53发布

站内文章 / 后端开发

11 0

戒情不戒烟

女 | 书童

私信

我试图与一个页面没有垂直滚动一个网站，但我需要的DIV的我有垂直扩展的页面（最多）的底部，当它包含的内容不适合，在div应该建立一个垂直卷轴。

我已经为div的内部 CSS中想通了这个小提琴，创建滚动条在需要的时候。我也想通了，如何使集装箱股利成长恰好占据它在页面的垂直空间。我只是不能让他们出来一起工作！

请有记住，在你的jsfiddle将无法查看在这个意义上你得到第二小提琴并没有真正表现出什么正在做整个网站和内容，但它的作品，因为我虽然预期。

只是另注：因为它们是不同的小提琴，在第一小提琴的编号div容器是第二个例子，他的ID＃DIV dcontent。

还有另外一两件事：一个类型的内容，这个div将垂直滚动，但对于其他类型的内容，我希望它水平滚动，因为这将有一个产品“滑块”水平显示这个DIV中的元素。

也请看看这张照片，因为它可能会更容易明白我想说： PICTURE

我试图寻找关于这些主题的其他问题，但似乎没有涵盖所有的方面，我试图解决...：S

如果有别的东西，我可以提供帮助你/我:)想出来的，请让我知道！

谢谢！

EDIT1：固定错别字

EDIT2：用于解释图片添加

Answer 1:

那么，长期的研究后，我发现了一个变通方法，做什么，我需要： http://jsfiddle.net/CqB3d/25/

CSS：

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

#caixa{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
#framecontentTop, #framecontentBottom{
position: absolute; 
top: 0;   
width: 800px; 
height: 100px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white; 
}

#framecontentBottom{
top: auto;
bottom: 0; 
height: 110px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#maincontent{
position: fixed; 
top: 100px; /*Set top value to HeightOfTopFrameDiv*/
margin-left:auto;
    margin-right: auto;
bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto; 
background: #fff;
    width: 800px;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 800px; 
}

HTML：

<div id="framecontentBottom">
<div class="innertube">

<h3>Sample text here</h3>

</div>
</div>


<div id="maincontent">
<div class="innertube">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, ligula hendrerit euismod auctor, diam nunc sollicitudin nibh, id luctus eros nibh porta tellus. Phasellus sed suscipit dolor. Quisque at mi dolor, eu fermentum turpis. Nunc posuere venenatis est, in sagittis nulla consectetur eget... //much longer text...
</div>
</div>
</div>

可能不与水平啄工作还没有，但是，它的工作正在进行中！

我基本上放弃了“开始”框-内盒-内盒模型和动态的高度和溢流属性中使用的固定的定位。

希望这可以帮助以后谁发现的问题！

编辑：这是最后的答案。

Answer 2:

我很惊讶，没有人提到的calc()呢。

我是不是能够让出你的具体情况，从你的小提琴，但我明白你的问题：你想有一个height: 100%的容器，仍然可以使用overflow-y: auto 。

这不开箱的工作，因为overflow需要一些硬编码的大小限制，知道什么时候它应该开始处理溢出。所以，如果你去与height: 100px ，它会正常工作。

好消息是说calc()可以帮助，但它不是简单height: 100%

calc()您可以结合措施的任意单位。

所以，这种情况在你所包含的图片描述：

由于所有的上面和下面的粉红色的div元素是一个已知的高度（比方说， 200px的总高度），你可以用calc来确定OLE小指的高度：

height: calc(100vh - 200px);

或者，“高度是视图高度减去200像素的100％。”

然后， overflow-y: auto应该像一个魅力。

Answer 3:

快速解答与要点

几乎相同的答案，从@Joum最好的选择答案，加快中试图达到的答案贴出的问题你的任务，节省时间破译什么在语法回事 -

回答

设置位置属性固定，设置在顶部和底部的属性以自己的喜好为你想拥有的“自动”的尺寸相比，它的父元素，然后设置溢出隐藏元素或DIV。

.YourClass && || #YourId{
   position:fixed;
   top:10px;
   bottom:10px;
   width:100%; //Do not forget width
   overflow-y:auto;
}

Wallah！这是你想有根据屏幕尺寸和或动态传入内容动态高度，同时保持了机会滚动所有你需要为你的特殊元素。

Answer 4:

试试这个：
CSS：

#content {
  margin: 0 auto;
  border: 1px solid red;
  width:800px;
  position:absolute;
  bottom:0px;
  top:0px;
  overflow:auto
}

HTML：

<body>
<div id="content">
...content goes here...
</div>
<body>

如果你没有在这种情况下，喜欢绝对定位，就可以让父子div来此一玩，都与position:relative 。

编辑：下面应该工作（我只是把一时的CSS内联）：

<div style="margin:0 auto; width:800px; height:100%; overflow:hidden">
<div style="border: 1px solid red; width:800px; position:absolute; bottom:0px; top:0px; overflow:auto">
...content goes here...
</div>
</div>

Answer 5:

这是与使用Flexbox，就和没有讨厌的水平溶液absolute定位。

 body { height: 100vh; margin: 0; display: flex; flex-direction: row; } #left, #right { flex-grow: 1; } #left { background-color: lightgrey; flex-basis: 33%; flex-shrink: 0; } #right { background-color: aliceblue; display: flex; flex-direction: row; flex-basis: 66%; overflow: scroll; /* other browsers */ overflow: overlay; /* Chrome */ } .item { width: 150px; background-color: darkseagreen; flex-shrink: 0; margin-left: 10px; }

 <html> <body> <section id="left"></section> <section id="right"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </section> </body> </html>

Answer 6:

这是我设法到目前为止做的。我想这是那种你想拉什么。唯一的一点是，我仍然不能管理到应有的高度分配到容器DIV。

的jsfiddle

该HTML：

<div id="container">
    <div id="header">HEADER</div>
    <div id="fixeddiv-top">FIXED DIV (TOP)</div>
    <div id="content-container">
        <div id="content">CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT</div>
    </div>
    <div id="fixeddiv-bottom">FIXED DIV (BOTTOM)</div>
</div>

和CSS：

html {
    height:100%;
}
body {
    height:100%;
    margin:0;
    padding:0;
}
#container {
    width:600px;
    height:50%;
    text-align:center;
    display:block;
    position:relative;
}
#header {
    background:#069;
    text-align:center;
    width:100%;
    height:80px;
}
#fixeddiv-top {
    background:#AAA;
    text-align:center;
    width:100%;
    height:20px;
}
#content-container {
    height:100%;
}
#content {
    text-align:center;
    height:100%;
    background:#F00;
    margin:0 auto;
    overflow:auto;
}
#fixeddiv-bottom {
    background:#AAA;
    text-align:center;
    width:100%;
    height:20px;
}

Answer 7:

我认为这是相当容易的。只要使用这个CSS

.content {
   width: 100%;
   height:(what u wanna give);
   float: left;
   position: fixed;
   overflow: auto;
   overflow-y: auto;
   overflow-x: none;
}

在此之后只是给这个类UR DIV就像 -

<div class="content">your stuff goes in...</div>

文章来源: Auto height div with overflow and scroll when needed

标签： html css scroll overflow

戒情不戒烟

女 | 书童

私信

收藏的人(0)

Ta的文章更多文章

0条评论

还没有人评论过~