Question

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

我已经在this fiddle中找到了div的里面的css，在需要时创建了滚动条。我也发现how to make容器div增长到恰好占据页面中的垂直空间。我只是不能让他们一起锻炼！

请记住，在jsfiddle，你将无法查看整个网站的内容，从这个意义上说，你得到的第二小提琴并没有真正显示正在做什么，但它的工作原理我的意图虽然。

只是另一个注意事项：因为它们是不同的小提琴，第一小提琴中的id＃container div是第二个例子的id #dcontent div。

另外还有一件事：对于一种内容，这个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%的{{1}}容器。

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

好消息是that calc() can help，但它并不像height: 100px那么简单。

height: 100%可让您组合任意度量单位。

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

由于粉红色div上方和下方的所有元素都具有已知高度（例如，总高度为calc()），您可以使用200px来确定ole的高度小指：

calc

或，＆＃39;高度是视图高度的100％减去200px。＆＃39;

然后，height: calc(100vh - 200px);应该像魅力一样工作。

Answer 3

主要要点快速回答

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

<强>答案

将position属性设置为fixed，将top和bottom属性设置为您希望与其父元素相比具有“auto”大小的元素或div的喜好，然后将overflow设置为hidden。

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

Wallah！这就是您希望根据屏幕大小和动态传入内容获得动态高度的特殊元素所需的全部内容，同时保留滚动的机会。

Answer 4

您可以通过 flexboxes 和 overflow属性来实现公正。

即使也计算了父母身高。

有关详细信息，请参见this answer或 JSFiddle 。

Answer 5

试试这个：
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>

如果您不喜欢这种情况下的绝对定位，那么只需使用position:relative来制作父母和子女div就可以了。

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

这是我到目前为止所做的。我想这就是你想要解决的问题。唯一的问题是我仍然无法为容器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

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

您可以使用jquery轻松完成此分配。这样，您可以定义行数限制。此外，您可以设置要添加垂直滚动的常规断点高度。我必须说，超过3行获得了Modify类，并且高度为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 9

$(document).ready(function() {
//Fix dropdown-menu box size upto 2 items but above 2 items scroll the menu box
    $("#dropdown").click(function() {
        var maxHeight = 301;
        if ($(".dropdown-menu").height() > maxHeight) { 
            maxHeight = 302;
            $(".dropdown-menu").height(maxHeight);
            $(".dropdown-menu").css({'overflow-y':'scroll'});
        } else {
            $(".dropdown-menu").height();
            $(".dropdown-menu").css({'overflow-y':'hidden'});
        }
    });
});

Answer 10

我觉得这很容易。只需使用此css

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

之后，只需将此课程提供给你的div，就像 -

一样

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

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

10 个答案: