Question

我尝试创建一个全屏网站（没有滚动条，高度为100％）我有一个高度为90％的div。我想动态地放置元素。我的问题是，当这个div内的许多元素时，它们会扩展父高度。因为＆＃34;过度滚动：隐藏＆＃34;身体上的属性，半页是显示器外。我为这个问题创建了一个例子：

fiddle

如果删除class="textBox"元素，则可以看到它们的外观。我尝试将overflow:scroll属性添加到父div，但它没有帮助，max-height:100%也是。

HTML

<div id="wrapper">
<div id="left">
    <div id="something">valami</div>
</div>
<div id="right">
    <div id="parent">
        <ul id="container">
            <li>
               <ul class="group">
                    <li class="textBox">
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                    </li>
                    <li class="textBox">
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                    </li>
                    <li class="textBox">
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                        lorem ipsum<br />
                    </li> 
               </ul> 
            </li>
        </ul>
        <div id="bottomContainer">

        </div>
    </div>
</div>

CSS

body, html {
height: 100%;
margin: 0;
overflow: hidden;
}
#wrapper {
    height: 100%;
    width: 100%;
    display: table;
}
#left, #right {
    display: table-cell;
    width: 50%;
    height: 100%;
    background-color: green;
}
#left {
    background-color: red;
}
#parent {
    padding: 50px 0 150px;
    height: 100%;
}
#container {
    border: 1px dashed black;
    height: 100%;
    max-height: 90%;
    overflow: scroll;
}
#container li {
     max-height: inherit;
}
#bottomContainer {
    height: 50px;
    border: 1px dashed black;
}
.group {
    padding: 10px;
}
.textBox {
    border: 1px dashed black;
    margin: 10px 0;
}
ul {
    list-style: none;
    padding: 0;
}

Answer 1

我不能100％确定这是否是您要找的，但将overflow: auto属性移至#parent似乎有效：

http://jsfiddle.net/YqP9g/2/

body, html {
    height: 100%;
    margin: 0;
    overflow: hidden;
}
#wrapper {
    height: 100%;
    width: 100%;
    display: table;
}
#left, #right {
    display: table-cell;
    width: 50%;
    height: 100%;
    background-color: green;
}
#left {
    background-color: red;
}
#parent {
    padding: 50px 0 150px;
    height: 100%;
    overflow: auto;
}
#container {
    border: 1px dashed black;
}
#bottomContainer {
    height: 50px;
    border: 1px dashed black;
}
.group {
    padding: 10px;
}
.textBox {
    border: 1px dashed black;
    margin: 10px 0;
}
ul {
    list-style: none;
    padding: 0;
}

Answer 2

updated your fiddle

body, html {
    height: 100%;
    margin: 0;
    overflow: hidden;
}
::-webkit-scrollbar { 
    display: none; 
}
#wrapper {
    height: 100%;
    width: 100%;
    display: table;
    position: relative;
    overflow: auto;
}
#left, #right {
    display: table-cell;
    width: 50%;
    background-color: green;
}
#left {
    background-color: red;
    position:absolute;
    top:0;
    left:0;
}
#right {    
    position:absolute;
    top:0;
    right:0;
}
#parent {
    padding: 50px 0 150px;
    height: 100%;
}
#container {
    border: 1px dashed black;
    height: 100%;
    max-height: 90%;
}
#container li {
     max-height: inherit;
}
#bottomContainer {
    height: 50px;
    border: 1px dashed black;
}
.group {
    padding: 10px;
}
.textBox {
    border: 1px dashed black;
    margin: 10px 0;
}
ul {
    list-style: none;
    padding: 0;
}

子元素扩展父高（100％）

2 个答案: