2

谢谢你的耐心。例如，我需要制作一个高度和最小高度为 100% 的左侧菜单。

如果网站没有很多内容，左侧菜单应该到底部如果网站有很多内容，左侧菜单也应该到底部，但是带有滚动条...

左右 div 始终必须为 100%

图片示例 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%;
}
4

3 回答 3

0

I don't think there is a pure css solution of this problem. There might be some ticks which are not easy to understand and implement. Rather you can solve your problem using little javascript or precisely jQuery.

lets assume the code block as follows-

<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>

now to make these two div leftContainer and rightContainer having same width you need to add some 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);

});

This js will set the height of the container of your interest dynamically. But one fallback is if your dom is really heavy or visitor has a slow connection, then there will occur a height jump. That means you'll see the height of the dependent container will increase sharply as soon as your page completed loading. To avoid this there you can use a loading gif image or simply a fadeIn effect of the contents. You can learn more about the fadeIn effect here

Here's the fiddle.

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

If you need more assistance here please feel free.

Thanks.

于 2013-04-22T18:25:02.893 回答
0

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

#right {
    overflow-y: scroll;
}

td {
    vertical-align:top;
}
于 2013-04-22T14:21:58.100 回答
0

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

于 2013-04-22T19:40:49.350 回答