Sections mit selber Größe

html.de-Forum HTML, XHTML & CSS
1

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/

2

Hallo,

du suchst Flexbox.

Gruss

MrMurphy

3
  1. Sticky Footer
  2. Flexbox, Faux Columns oder JavaScript
4

So ich habe es einmal mit Flexbox probiert. Jedoch bekomme ich es mit den 3 Spalten nav, left, right immer noch nicht hin. Sie wollen einfach nicht gleichmäßig mitwachsen.

Beispiel:
http://jsfiddle.net/u891bahd/

5

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

6

Hier mal eine Variante mit float/margin. Zwar veraltet, aber funktioniert.

<!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