Html 自动高度 div 溢出并在需要时滚动

Question

提问by Joum

I'm trying to make a website with no vertical scrolling for a page, but i need that one of the DIVs i have to expand vertically to the bottom of the page (at most), and that when it has content that does not fit, the div should create a vertical scroller.

我正在尝试制作一个没有页面垂直滚动的网站，但我需要其中一个 DIV，我必须垂直扩展到页面底部（最多），并且当它有不适合的内容时，div 应该创建一个垂直滚动条。

i already have the css for the insideof the div figured out in this fiddle, creating the scroller when needed. i also have figured out how to makethe container div grow to occupy exactly the vertical space it has in the page. i just can't make them work out together!

我已经在这个小提琴中找到了 div内部的 css，在需要时创建了滚动条。我还想出了如何使容器 div 增长到恰好占据它在页面中的垂直空间。我就是不能让他们一起锻炼！

please have in mind that in jsfiddle you won't be able to view the content of the whole website and in that sense what you get for the 2nd fiddle doesn't really show what's being done, but it works as i intended though.

请记住，在 jsfiddle 中您将无法查看整个网站的内容，从这个意义上说，您从第二个小提琴中获得的内容并没有真正显示正在完成的工作，但它按我的意图工作。

just another note: as they are different fiddles, the id#container div in the 1st fiddle is he id#dcontent div of the 2nd example.

另一个注意事项：由于它们是不同的小提琴，因此第一个小提琴中的 id#container div 是第二个示例的 id#dcontent div。

there is one other thing: for a type of content, this div will scroll vertically, but for other type of content, i want it to scroll horizontally, as it will have a product "slider" displaying elements horizontally inside this DIV.

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

please also look at this photo because it might be easier to understand what i'm trying to say: PICTURE

也请看看这张照片，因为它可能更容易理解我想说的：图片

i tried looking to other questions regarding these topics, but none seemed to cover all of the aspects i'm trying to solve... :S

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

if there is something else i can provide to help you/me :) figuring it out, pls let me know!

如果还有什么我可以提供帮助你/我 :) 弄清楚，请告诉我！

thanks!

谢谢！

EDIT1: fixed typos

EDIT1：修正错别字

EDIT2: added picture for explanation

EDIT2：添加图片解释

Answer 1

采纳答案by Joum

Well, after long research, i found a workaround that does what i need: http://jsfiddle.net/CqB3d/25/

好吧，经过长时间的研究，我找到了一种解决方法，可以满足我的需要：http: //jsfiddle.net/CqB3d/25/

CSS:

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:

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>

might not work with the horizontal thingy yet, but, it's a work in progress!

可能还不能使用水平的东西，但是，这是一项正在进行的工作！

I basically dropped the "inception" boxes-inside-boxes-inside-boxes model and used fixed positioning with dynamic height and overflow properties.

我基本上放弃了“初始”boxes-inside-boxes-inside-boxes 模型，并使用具有动态高度和溢出属性的固定定位。

Hope this might help whoever finds the question later!

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

EDIT: This is the final answer.

编辑：这是最终答案。

Answer 2

回答by Brandon

I'm surprised no one's mentioned calc()yet.

我很惊讶还没有人提到calc()。

I wasn't able to make-out your specific case from your fiddles, but I understand your problem: you want a height: 100%container that can still use overflow-y: auto.

我无法从你的小提琴中弄出你的具体情况，但我理解你的问题：你想要一个height: 100%仍然可以使用overflow-y: auto.

This doesn't work out of the box because overflowrequires some hard-coded size constraint to know when it ought to start handling overflow. So, if you went with height: 100px, it'd work as expected.

这不是开箱即用的，因为overflow需要一些硬编码的大小约束才能知道何时应该开始处理溢出。因此，如果您使用height: 100px，它会按预期工作。

The good news is that calc()can help, but it's not as simple as height: 100%.

好消息是这calc()会有所帮助，但并不像height: 100%.

calc()lets you combine arbitrary units of measure.

calc()允许您组合任意度量单位。

So, for the situation you describe in the picture you include:

因此，对于您在图片中描述的情况，您包括：

Since all the elements above and below the pink div are of a known height (let's say, 200pxin total height), you can use calcto determine the height of ole pinky:

由于粉红色 div 上方和下方的所有元素都具有已知高度（比方说，200px总高度），您可以使用calc来确定 ole pinky 的高度：

height: calc(100vh - 200px);

or, 'height is 100% of the view height minus 200px.'

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

Then, overflow-y: autoshould work like a charm.

然后，overflow-y: auto应该像魅力一样工作。

Answer 3

回答by MattOlivos

Quick Answer with Main Points

要点快速解答

Pretty much the same answer as the best chosen answer from @Joum, to quicken your quest of trying to achieve the answer to the posted question and save time from deciphering whats going on in the syntax --

与来自@Joum 的最佳选择答案几乎相同的答案，以加快您尝试获得已发布问题的答案并节省破译语法中发生的事情的时间-

Answer

回答

Set position attribute to fixed, set the top and bottom attributes to your liking for the element or div that you want to have an "auto" size of in comparison to its parent element and then set overflow to hidden.

将位置属性设置为固定，将顶部和底部属性设置为您想要与其父元素相比具有“自动”大小的元素或 div，然后将溢出设置为隐藏。

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

Wallah! This is all you need for your special element that you want to have a dynamic height according to screen size and or dynamic incoming content while maintaining the opportunity to scroll.

瓦拉！这就是您想要根据屏幕大小和/或动态传入内容具有动态高度同时保持滚动机会的特殊元素所需的全部内容。

Answer 4

回答by Neurotransmitter

This is a horizontal solution with the use of FlexBox and without the pesky absolutepositioning.

这是一个使用 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 5

回答by preahkumpii

Try this:
CSS:

试试这个：
CSS：

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

HTML:

HTML：

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

If you don't like absolute positioning in this case, just can play with making a parent and child div to this one, both with position:relative.

如果您在这种情况下不喜欢绝对定位，只需将父 div 和子 div 设置为这个，都可以使用position:relative.

EDIT: Below should work (I just put the css inline for the moment):

编辑：下面应该可以工作（我只是暂时将 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 6

回答by Rodrigo D'Agostino

This is what I managed to do so far. I guess this is kind of what you're trying to pull out. The only thing is that I can still not manage to assign the proper height to the container DIV.

这是我迄今为止设法做到的。我想这就是你想要拉出来的东西。唯一的问题是我仍然无法为容器 DIV 分配适当的高度。

JSFIDDLE

The HTML:

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>

And the CSS:

和 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

回答by Sh.Sabour

You can do this assignment easily by using jquery. In this way, you can define number of row limitation. Furthermore, you can regular breakpoints height that want adding vertical scrolling. I must say that more than 3 rows get modify class and also height is 76px.

您可以使用 jquery 轻松完成此任务。通过这种方式，您可以定义行数限制。此外，您可以定期设置要添加垂直滚动的断点高度。我必须说超过 3 行得到修改类，高度也是 76px。

$(document).ready(function() {
  var length = $(this).find('li').length;
  if (length > 3) {
    $(".parent").addClass('modify');
  }
})

/*for beauty*/

ul {
  margin: 0 auto;
  width: 50%;
  border: 1px solid #ccc;
  padding: 3px;
}

ul li {
  padding: 3px;
  background: #ccc;
  margin: 2px 0;
  list-style: none;
}

/*main class*/

.modify {
  overflow-y: scroll;
  height: 76px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="parent">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>

Answer 8

回答by N. Kudryavtsev

You can do this justwith flexboxesand overflowproperty.

你可以只用flexboxes和overflowproperty来做到这一点。

Even if parent height is computedtoo.

即使也计算了父身高。

Please see this answeror JSFiddlefor details.

有关详细信息，请参阅此答案或JSFiddle。

Answer 9

回答by Gaurav Mehra

i think it's pretty easy. just use this css

我认为这很容易。只需使用这个 css

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

after this just give this class to ur div just like -

在此之后，只需将此类给您的 div 就像 -

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

Html 自动高度 div 溢出并在需要时滚动

提问by Joum

采纳答案by Joum

回答by Brandon

回答by MattOlivos

回答by Neurotransmitter

回答by preahkumpii

回答by Rodrigo D'Agostino

回答by Sh.Sabour

回答by N. Kudryavtsev

回答by Gaurav Mehra

相关推荐

最近更新

标签

Html 自动高度 div 溢出并在需要时滚动

提问by Joum

采纳答案by Joum

回答by Brandon

回答by MattOlivos

回答by Neurotransmitter

回答by preahkumpii

回答by Rodrigo D'Agostino

回答by Sh.Sabour

回答by N. Kudryavtsev

回答by Gaurav Mehra

相关推荐

Html 将一个 div 定位在另一个 div 的底部附近

Html 居中内联块 DIV

Html 两个div之间的垂直线间隔

HTML 表格对齐图像和文本

相关推荐

最近更新

标签