XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   2 Div's nebeneinander, links variabel (100%), rechts 300px fix (http://xhtmlforum.de/showthread.php?t=71183)

bogazci 01.08.2014 08:04

Leider funktioniert das aber nicht mit dem IE9 :(

Getestet mit Chrome, FF und IE9. Bei Chrome und FF keine Probleme. Bei IE9 geht es aber leider nicht. Ich muss zumindest IE9 und höher können.

etux 01.08.2014 08:09

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>



Alle Zeitangaben in WEZ +2. Es ist jetzt 01:58 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2022, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2022