Responsywny 2-kolumnowy układ CSS zawierający pasek boczny o stałej szerokości?
Nie można znaleźć rozwiązania tego problemu (to, co zgaduję, musi być dość powszechnym problemem) w dowolnym miejscu.
Tworzę responsywny projekt z paskiem bocznym, w którym pasek boczny musi mieć stałą szerokość 200 pikseli i nieznaną wysokość. Jak mogę to zrobić, aby główny obszar treści zajmował całą pozostałą szerokość, bez żadnych błędów.
Najbliżej do tego dochodzę, ale problem z tym polega na tym, że pasek boczny może nakładać się na stopkę. Czy ktoś może zasugerować poprawkę do mojego kodu lub udostępnić mi kod, który działa?
* {
padding: 0;
margin: 0;
outline: 0;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
body {
background: orange;
}
#container {
max-width: 1000px;
min-width: 768px;
margin: 0 auto;
background: yellow;
position: relative;
height: 100%;
}
#header {
background: purple;
color: white;
text-align: center;
padding: 10px;
}
#main {
position: relative;
}
aside {
background: blue;
width: 200px;
color: white;
position: absolute;
top: 0;
/* change this to "right: 0;" if you want the aside on the right. Also, change the "margin-left" code, below. */
left: 0;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px; /* If you change this value, remember to change the margin-left value of #primary */
padding-right: 10px; /* ditto */
}
#primary {
background: red;
/* change this to margin-right if you want the aside on the right. Also change the "left" code, above. */
margin-left: 220px; /* aside_width + aside_left_padding + aside_right_padding = 200px + 10px + 10px */
padding: 1em; /* whatever */
}
#footer {
background: green;
color: white;
padding: 10px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<div id="container">
<div id="header">
<h1>LAYOUT TEST #2</h1>
</div>
<div id="main">
<div id="primary">
<h2>THIS IS THE MAIN CONTENT ** THIS IS THE MAIN CONTENT ** THIS IS THE MAIN CONTENT</h2>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<h2>sub heading</h2>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<h2>sub heading</h2>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
</div>
<aside>
<h3>navigation (left)</h3>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
</aside>
</div>
<div id="footer">
<h1>LAYOUT TEST #2</h1>
</div>
</div>