Итак, у меня есть HTML-структура, как это
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
height: 100%;
min-width: 900px;
min-height: 650px;
background: #dddbd9 url('../images/bg.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}
#content {
clear: both;
height: 345px;
position: relative;
margin: 0 auto;
width: 790px;
padding: 20px;
overflow: hidden;
}
#bottomBar {
height: 100%;
margin: 0 auto;
width: 100%;
padding: 0px;
background: #ffffff url('../images/bottomBG.jpg') 0 0 repeat-x;
}
<body>
<div id="container">
<div id="content"></div>
<div id="bottomBar"></div>
</div>
</body>
Почему высота #bottomBar растягивается на несколько сотен пикселей, тогда как изображение bg составляет всего 115 пикселей?
ОБНОВЛЕНИЕ: Я на самом деле не хочу, чтобы bottomBar был просто 115. Я хочу, чтобы он занимал всю оставшуюся область дна, но не растягивался больше, чем окно. Спасибо.
ОБНОВЛЕНИЕ 2: То есть #content - это 345px, #container - это 100%, на самом деле между содержимым и bottomBar есть некоторые другие div, как мне получить оставшуюся высоту для #bottomBar? Я хочу bottomBar просто занять оставшуюся область.