Я уверен, что это очевидно для некоторых экспертов CSS, но я застрял!
Мне нужен фиксированный заголовок, боковая панель и нижний колонтитул (в настоящее время удалены) и для основной области содержимого, чтобы увеличиваться или уменьшаться по мере необходимости. Проблема в том, что основная область содержимого будет содержать изображение, и я хочу, чтобы оно росло до максимума, никогда не уменьшалось до минимума, а всегда занимало как можно большую часть основного содержимого, не превышая размер экрана!
В данный момент изображение отображается в полном размере 1200x800, которое проходит через край моего экрана, и я в растерянности. Любая помощь высоко ценится!
<div id="wrapper">
<div id="container">
<div id="header">
<h1>page header</h1>
</div>
<div id="sidebar1">
<div id="nav">
<ul>
<li><a href="#">menu 1</a></li>
<li><a href="#">menu 2</a></li>
</ul>
</div>
</div> <!-- end #sidebar1 -->
<div id="mainContent">
<div class="imagebox">
<img src="images/image16.jpg" />
</div>
</div><!-- end #mainContent -->
</div><!-- end #container -->
</div>
#wrapper {
position: relative;
margin: 0 auto;
max-width: 1550px;
max-height: 1040px;
min-width: 951px !important;
min-height: 538px !important;
overflow: hidden;
zoom: 1;
width: 100%;
height: 100%;
}
.tcGreyE #container {
background: #333333;
margin: 0 auto;
text-align: left;
}
.tcGreyE #header {
height: 120px;
background-color: #262626;
padding: 10px 0 0 20px;
}
.tcGreyE #sidebar1 {
float: left;
width: 350px;
background: #333333;
padding: 15px 0 0 20px;
}
.tcGreyE #sidebar1 h3, .tcGreyE #sidebar1 p {
margin-left: 10px;
margin-right: 10px;
}
.tcGreyE #mainContent {
position: relative;
margin: 0 10px 0 370px;
max-height: 800px;
max-width: 1200px;
width:100%;
}
.tcGreyE .imagebox {
border: 3px solid white;
width: 100%;
height: auto;
max-width: 1200x;
max-height: 800px;
padding:3px;
}
.imagebox img {
width: 100%;
}