html - 如何让一个div占据剩余空间

Question

我见过很多此类问题，但我仍然无法解决我的特定问题。我有类似的东西

<div id="container">
   <img src="image.png"/>
   <div id="menu"><ul>(...)</ul></div>
</div>

问题是我不知道图像的高度，我只希望它尽可能宽，然后它的高度应该自动设置并保持比例。“菜单” div 应位于该图像下方并占据剩余高度。

#container img{
   width:100%;
}

#menu{
   width:100%;
}

#menu li{
   height:50%;
}

http://jsfiddle.net/v6b3S/

Answer 1

您必须在两个对象中的至少一个上设置一个确定的高度。如果您想确保不剪裁图像，请使用背景图像属性：http: //jsfiddle.net/v6b3S/4/

#container{
    height: 750px;
    overflow:hidden;
    border: 1px solid black;
}

#top-image {
    display: block;
    background: url('http://eofdreams.com/data_images/dreams/image/image-09.jpg') center center no-repeat;
    background-size: 100%;
    width: 100%;
    height: 50%;
}
#menu{
   width:100%;
    height:50%;
   border: 1px solid red;
}

#page{
    height:100%;
}
#a{
    background-color:black;
}

#b{
    background-color:red;
}

#c{
    background-color:blue;
}

#d{
    background-color:yellow;
}
li{
    list-style:none;   
    display:block;
    height:100%;
    background-size: 100%;
    width:25%;
    float:left;
}
span{
    height:100%;
    width:100%;
    display:block;
}
ul{
 height:100%;
    width:100%;
    margin:0;
    padding:0;
}