Question

感谢您的耐心等待。我需要制作一个高度和最小高度为100％的左侧菜单例如。

如果网站内容不多，则左侧菜单应该显示在底部如果网站有很多内容，左侧菜单也应该到底部，但滚动条...

左右div必须始终为100％

Image Example http://www.diegomenezes.com/stack.jpg

可以使用HTML5

在这里你可以看到JSFiddle链接 http://jsfiddle.net/6gSYn/

这是我的代码！

    <div id="container">
    <div id="top"><h1>TESTE</h1></div>
    <div id="content">
        <div id="left">
        <ul class="lista">
            <li>ITEM 1</li>
            <li>ITEM 1</li>
            <li>ITEM 1</li>                
            <li>ITEM 1</li>
            <li>ITEM 1</li>
            <li>ITEM 1</li>
            <li>ITEM 1</li>
            <li>ITEM 1</li>
        </ul>
        </div>
        <div id="right">
        <p>TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE </p>        

            <div id="footer">
            <p>TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE </p>
            </div>
    </div>
    </div>    

</div>

这里是CSS

@charset "utf-8";
/* CSS Document */

* {
margin: 0px;
padding: 0px;
}
html {
    height: 100%;
}

body {
background: darkgrey;
height: 100%;

}

#container {    
height: 100%;
position: relative;
}

#top {
height: 100px;
width: 100%;
background-color: black;
color: white;
float:left;
}

#content {
background: darkgrey;
width:100%;
min-height: 100%;
height:100%;
}

#content ul.lista {
width: 250px;
display: inline-block;
vertical-align: top;
background: lightgrey;
color: red;
bottom: 0;
}


#right {
width: 1000px;
color: blue;
display: inline-block;
padding: 10px;
min-height: 400px;
}


#footer {
color: black;
height: 50px;
text-align: center;
width: 100%;
}

Answer 1

试试这个并告诉你是否为你工作jsfiddle
CSS：

#right {
    overflow-y: scroll;
}

td {
    vertical-align:top;
}

Answer 2

我不认为这个问题有一个纯粹的css解决方案。可能存在一些不容易理解和实施的刻度。相反，你可以使用小的javascript或精确的jQuery来解决你的问题。

让我们假设代码块如下 -

<div id="mainContainer">
    <div id="leftContainer">
        <p>Some contents which you want to put in the left blovk</p>
    </div>
    <div id="rightContainer">
        <p>Some contents which you want to put in the right blovk</p>
    </div>
</div>

现在要使这两个div leftContainer和rightContainer具有相同的宽度，您需要添加一些js -

$(document).ready(function(){
// making the height of the right container same as the left one

    leftContainerHeight = $('#leftContainer').outerHeight();
    $('#rightContainer').height(leftContainerHeight);

//or

// making the height of the right container same as the left one

    rightContainerHeight = $('#leftContainer').outerHeight();
    $('#leftContainer').height(rightContainerHeight);

});

此js将动态设置您感兴趣的容器的高度。但是，如果你的dom非常重，或者游客连接速度很慢，那么就会出现一个高度跳跃。这意味着只要页面完成加载，您就会看到相关容器的高度会急剧增加。为避免这种情况，您可以使用加载gif图像或仅使用内容的fadeIn效果。您可以了解有关fadeIn效果here

的更多信息

这是小提琴。

http://jsfiddle.net/6gSYn/9/

如果您需要更多帮助，请随意。

感谢。

Answer 3

为了使高度：100％在所有浏览器中正常运行，您的父元素需要具有指定像素高度的高度。这很复杂，因为有时您的内容需要比指定高度更多的空间。你可以使用javascript来解决这个问题，但这并不总是最好的解决方案。

左侧菜单，高度和最小高度100％

3 个答案: