XHTMLforum - 2 Div's nebeneinander, links variabel (100%), rechts 300px fix

Zitat:

Zitat von bogazci (Beitrag 540578)

Ich habe das mal in ein fiddle gepackt 2 DIVs nebeneinander - JSFiddle aber bekomme die 100% Höhe für das fixe div nicht hin :(

Wäre es nicht sinnvoller zu zeigen, was Du versucht hast und woran Du gescheitert bist. ;) :no:

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>