Question

我见过很多这类问题，但我仍无法解决我的问题。我有类似

的东西

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

问题是我不知道图像的高度，我只希望它尽可能宽，然后它的高度应该自动保持比例。 “menu”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;
}

如何使div占用剩余空间

1 个答案: