自动高度 div 溢出并在需要时滚动 [英] Auto height div with overflow and scroll when needed

问题描述

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

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

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

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

还有另外一件事:对于一种类型的内容，这个 div 将垂直滚动，但对于其他类型的内容，我希望它水平滚动，因为它会有一个产品滑块"在这个 DIV 内水平显示元素.

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

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

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

谢谢！

修正错别字

添加图片解释

解决方案

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

CSS:

body{边距:0；填充:0；边框:0；溢出:隐藏；高度:100%；最大高度:100%；}#caixa{宽度:800px；左边距:自动；右边距:自动；}#framecontentTop, #framecontentBottom{位置:绝对；顶部:0；宽度:800px；高度:100px；/*顶框div的高度*/溢出:隐藏；/*禁用滚动条.设置为滚动"以启用*/背景颜色:海军蓝；白颜色;}#framecontentBottom{顶部:自动；底部:0；高度:110px；/*底框div高度*/溢出:隐藏；/*禁用滚动条.设置为滚动"以启用*/背景颜色:海军蓝；白颜色;}#主要内容{位置:固定；顶部:100px；/* 将最高值设置为 HeightOfTopFrameDiv*/左边距:自动；右边距:自动；底部:110px；/*设置底部值为HeightOfBottomFrameDiv*/溢出:自动；背景:#fff;宽度:800px；}.内管{边距:15px；/*每个DIV内部DIV的边距(提供填充)*/}* html body{/*IE6 hack*/填充:130px 0 110px 0；/* 将值设置为 (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/}* html #maincontent{/*IE6 hack*/高度:100%；宽度:800px；}

HTML:

<div class="内胎"><h3>此处为示例文本</h3>

<div id="主要内容"><div class="内胎">Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.Sed scelerisque、ligula hendrerit euismod auctor、diam nunc sollicitudin nibh、id luctus eros nibh portatellus.菜豆 sed suscipit dolor.在 mi dolor 的古怪，欧盟发酵 turpis.Nunc posuere venenatis est, in sagittis nulla consectetur eget...//更长的文本...

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

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

希望这对以后发现问题的人有所帮助！

这是最终答案.

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.

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

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.

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.

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.

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

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

thanks!

EDIT1: fixed typos

EDIT2: added picture for explanation

解决方案

Well, after long research, i found a workaround that does what i need: 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>

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.

Hope this might help whoever finds the question later!

EDIT: This is the final answer.

这篇关于自动高度 div 溢出并在需要时滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！