Zitat:
Zitat von bogazci
|
Wäre es nicht sinnvoller zu zeigen, was Du versucht hast und woran Du gescheitert bist.
Hier ein paar mögliche Lösungswege:
min-height für body
HTML-Code:
<!doctype html>
<meta charset="UTF-8">
<title>min-height für body :: xhtmlforum.de</title>
<style>
* { margin: 0; padding: 0; }
/* Einschliessen der Floats */
body:before,
body:after { content: " "; display: table; }
body:after { clear: both; }
html { height: 100%; }
body { min-height: 100%; }
body { border-right: 300px solid #b3a400; background-color: #d6d6d6; }
.fix { float: right; width: 300px; margin-right: -300px; }
.liquid { float: left; width: 100%; background-color: #b9babe; }
</style>
<div class="fix">
<p>Feste Breite</p>
</div>
<div class="liquid">
<p>Flüssige Breite</p>
</div>
min-height für html
HTML-Code:
<!doctype html>
<meta charset="UTF-8">
<title>min-height für html :: xhtmlforum.de</title>
<style>
* { margin: 0; padding: 0; }
html { min-height: 100%; border-right: 300px solid #b3a400; background-color: #d6d6d6; }
body { float: left; width: 100%;}
.fix { float: right; width: 300px; margin-right: -300px; }
.liquid { float: left; width: 100%; background-color: #b9babe; }
</style>
<div class="fix">
<p>Feste Breite</p>
</div>
<div class="liquid">
<p>Flüssige Breite</p>
</div>
css-table
HTML-Code:
<!doctype html>
<meta charset="UTF-8">
<title>css-table :: xhtmlforum.de</title>
<style>
html { display: table; width: 100%; height: 100%; table-layout: fixed; }
body { display: table-row; }
.fix,
.liquid { display: table-cell; }
body { background-color: #d6d6d6; }
.liquid { }
.liquid p { background-color: #b9babe; }
.fix { width: 300px; background-color: #b3a400; }
</style>
<div class="liquid">
<p>Flüssige Breite</p>
</div>
<div class="fix">
<p>Feste Breite</p>
</div>
position
HTML-Code:
<!doctype html>
<meta charset="UTF-8">
<title>position :: xhtmlforum.de</title>
<style>
html { padding-right: 300px; }
body { background-color: #d6d6d6; }
.fix { position: absolute /* fixed - zunächst kein scrollen */; top: 0; right: 0; width: 300px; min-height: 100%; background-color: #b3a400; }
.liquid { background-color: #b9babe; }
</style>
<div class="fix">
<p>Feste Breite</p>
</div>
<div class="liquid">
<p>Flüssige Breite</p>
</div>