• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Sections mit selber Größe

PapstBenR

PapstBenR

Neues Mitglied
Hallo,

ich habe einmal zwei Fragen:

1. Wie bekomme ich es hin das nav, conversationList und conversationen ihre Größe bis zum unteren Rand ausweiten, selbst wenn der Inhalt der drinnen steht kleiner ist? min-height funktioniert irgendwie nicht.

2. Wie bekomme ich es hin, dass diese 3 immer die selbe Größe haben. Zum Beispiel, wenn in einem von den dreien mal etwas mehr Text steht, dann sollen sich die anderen beiden automatisch der Größe anpassen.

Hab mal ein JSFIDDLE erstellt: http://jsfiddle.net/aLr4vmLr/
 
Hallo,

lerne bitte die Grundlagen von HTML und CSS. Sonst wirst du dich nur von Problem zu Problem hangeln und deine Seiten werden nie funktionieren.

Ich habe mit deinen bruchstückhaften Informationen ein Beispiel mit Flexbox erstellt:

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_08_14_pabstbenr_01_layout.html

Alle Angaben, auch das CSS, befinden sich im Quelltext der Datei. Die kannst du also einfach runterladen und nach deinen Wünschen bearbeiten. Du sollltest natürlich zumindest halbwegs wissen was du tust und was du erreichen willst.

Wenn du zum Beispiel den Footer nicht willst kannst du ihn einfach aus dem HTML-Teil des Quelltextes löschen.

Abstände, Border, Hintergrundfarben und so weiter können ganz normal angepasst werden.

Für ältere Browser können noch die entsprchenden Präfixe für die Flexbox-Anweisungen hinzugefügt werden. Ich lasse die weg damit der eigentliche Quelltext übersichtlicher bleibt. Dafür gibt es auch Seiten, die das automatisch erledigen, zum Beispiel

http://jsfiddle.net/simevidas/udyTs/show/light/

Einfach den CSS-Quelltext in die linke Seite kopieren und dann den generierten aus der rechten Seite übernehmen.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Hier mal eine Variante mit float/margin. Zwar veraltet, aber funktioniert.
Code: 
<!DOCTYPE html>
<html lang="de">
<head>

<meta charset="utf-8">
<title>Gauner - Float-Problem</title>
<style>

* {
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}

#container {
margin:10px auto;
border:1px solid #000;
width:90%;
background:#add;
position:relative;
}


#header {
text-align:center;
padding:20px;
background:#dda;
border-bottom:1px solid #000;
}
#col1 {
float:left;
width:25%;position:relative;z-index:99;
}



#left {
margin-left:25%;
background:#ada;
border-left:1px solid #000;
position:relative;z-index:98;
}

#col2 {
float:left;
width:33.3%;position:relative;
}



#left_2 {
margin-left:33.3%;
background:#cba;
border-left:1px solid #000;
position:relative;z-index:99;
}

#col3 {
float:left;
width:50%;position:relative;
}

#col4 {
margin-left:50%;
border-left:1px solid #000;
background:#deb;
position:relative;z-index:99;
}

#col4:beforex {
content:"";
position:absolute;
top:0px;left:0px;bottom:0px;right:0px;margin:5px;z-index:-1;
border:1px solid #000;background:#eee;
}

#left_2:beforex{
content:"";
position:absolute;
top:0px;left:0px;bottom:0px;right:50%;margin:5px;
border:1px solid #000;
background:#eee;
}

#left:beforex{
content:"";
position:absolute;
top:0px;left:0px;bottom:0px;right:66.6%;margin:5px;
border:1px solid #000;background:#eee;
}

#left:afterx{
content:"";
position:absolute;
top:0px;left:-33.3%;bottom:0px;right:100%;margin:5px;z-index:-1;
border:1px solid #000;background:#eee;
}

#col4:after {
content:"";
display:block;
clear:left;
}



#footer {
text-align:center;
padding:20px;
background:#dda;
border-top:1px solid #000;
}


p {
padding:10px;
}

p:hover {
height:400px;
}
</style>

</head>

<body>
<div id="container">

<div id="header"><h1>Website</h1></div>

  <div id="col1"><p>col1</p><p>col1</p></div>
<div id="left">
  <div id="col2"><p>col2</p><p>col2</p><p>col2</p></div>
  <div id="left_2">
  <div id="col3"><p>col3</p><p>col3</p><p>col3</p><p>col3</p></div>
  <div id="col4"><p>col4</p><p>col4</p><p>col4</p><p>col4</p><p>col4</p></div>
  </div><!--/left_2-->
</div><!--/left-->

<div id="footer">
  <h4>Footer</h4>
</div><!--/footer-->

</div><!--/container-->
</body>
</html>

Oder mit drei Spalten
http://www.gipspferd.de/forumhilfe/gleichlange-spalten/

Ach ist aber ohne StickyFooter
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben