CSS - Positionierung: Unterschied zwischen den Versionen
Aus Wikizone
| Zeile 39: | Zeile 39: | ||
width: 570px; | width: 570px; | ||
padding: 15px; | padding: 15px; | ||
| + | } | ||
| + | |||
| + | ==== Footer bis zum Seitenende ==== | ||
| + | http://stackoverflow.com/questions/22934016/extend-div-to-bottom-of-page-only-html-and-css | ||
| + | |||
| + | Solution: #1: css tables: | ||
| + | |||
| + | FIDDLE | ||
| + | |||
| + | html,body | ||
| + | { | ||
| + | height:100%; | ||
| + | width:100%; | ||
| + | } | ||
| + | body | ||
| + | { | ||
| + | display:table; | ||
| + | } | ||
| + | #top, #bottom | ||
| + | { | ||
| + | width: 100%; | ||
| + | background: yellow; | ||
| + | display:table-row; | ||
| + | |||
| + | } | ||
| + | #top | ||
| + | { | ||
| + | height: 50px; | ||
| + | } | ||
| + | #bottom | ||
| + | { | ||
| + | background: lightgrey; | ||
| + | height:100%; | ||
| + | } | ||
| + | Solution #2: Using calc and viewport units | ||
| + | |||
| + | FIDDLE | ||
| + | |||
| + | #top | ||
| + | { | ||
| + | height: 50px; | ||
| + | background: yellow; | ||
| + | } | ||
| + | #bottom | ||
| + | { | ||
| + | background: lightgrey; | ||
| + | height: calc(100vh - 50px); | ||
| + | } | ||
| + | Solution #3 - Flexbox | ||
| + | |||
| + | FIDDLE | ||
| + | |||
| + | html, body | ||
| + | { | ||
| + | height: 100%; | ||
| + | } | ||
| + | body | ||
| + | { | ||
| + | display: flex; | ||
| + | flex-direction: column; | ||
| + | } | ||
| + | #top | ||
| + | { | ||
| + | height: 50px; | ||
| + | background: yellow; | ||
| + | } | ||
| + | #bottom | ||
| + | { | ||
| + | background: lightgrey; | ||
| + | flex:1; | ||
} | } | ||
Version vom 22. Februar 2017, 10:12 Uhr
Die Eigenschaften position und float
In CSS Layouts kann man Elemente absolut oder relativ positionieren (Maße angeben) Außerdem kann man Elemente 'floaten'.
Positionierungsarten:
position: static; position: absolute; position: relative; position: fixed;
Float Eigenschaft:
float: left; float: right; float: none;
Absolute Positionierung
- Die Maßangabe bezieht sich auf die obere linke Ecke des Browserfensters
- Wenn ein Elternelement ebenfalls relativ oder absolut positioniert ist bezieht sich die Maßangabe auf das Elternelement
- Wenn keine Maßangabe für top,left... verwendet wird bleibt die Box da stehen wo sie ohne positionierung gelandet wäre.
Relative Positionierung
Hier beziehen sich die Werte auf die 'normale' Position des Elements. Es ist also quasi eine Verschiebung.
Float-Elemente
- Ein gefloatetes Element wird aus dem Textfluss gehoben und rutscht nach links (float:left;) oder rechts-oben (float:right;) Bis es an das nächste Float-Element stößt.
- Text (oder Bilder) aus dem normalen Textfluss muß um die gefloateten Kästen fließen.
- floatende Elemente müssen immer eine Breite haben
Beispiele
- box1 {
position: absolute; top: 70px; left: 80px; width: 570px; padding: 15px; }
http://stackoverflow.com/questions/22934016/extend-div-to-bottom-of-page-only-html-and-css
Solution: #1: css tables:
FIDDLE
html,body {
height:100%; width:100%;
} body {
display:table;
}
- top, #bottom
{
width: 100%; background: yellow; display:table-row;
}
- top
{
height: 50px;
}
- bottom
{
background: lightgrey; height:100%;
} Solution #2: Using calc and viewport units
FIDDLE
- top
{
height: 50px; background: yellow;
}
- bottom
{
background: lightgrey; height: calc(100vh - 50px);
} Solution #3 - Flexbox
FIDDLE
html, body {
height: 100%;
} body {
display: flex; flex-direction: column;
}
- top
{
height: 50px; background: yellow;
}
- bottom
{
background: lightgrey; flex:1;
}
