Wie schweben 2 divs am unteren Rand eines div

Ich habe versucht, meinen Kopf (mit 2 divs) Einrichtung mitWie schweben 2 divs am unteren Rand eines div

position: relative;

und den beiden divs innerhalb des Header mit

position: absolute; 
bottom: 0;

Aber Ich möchte, dass die violetten #menu_bar und blauen #sub_menu_bar Divs am unteren Rand des roten #header Div schwimmen.

Wie kann ich das erreichen?

#html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    outline: 0; 
 
    font-size: 100%; 
 
    vertical-align: baseline; 
 
    background: transparent; 
 
} 
 

 
body { 
 
    display: flex; 
 
} 
 

 
#menu_container { 
 
    display: block; 
 
    background: rgba(42, 42, 42, 0.496); 
 
    width: 250px; 
 
    height: 100%; 
 
} 
 

 
#main_container { 
 
    background: rgba(0, 0, 0, 0.526); 
 
    display: block; 
 
    height: 100%; 
 
    margin-left: auto; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    flex: 1; 
 
} 
 

 
#header { 
 
    background: rgba(255, 0, 0, 0.526); 
 
    height: 120px; 
 
    margin-left: -20px; 
 
    margin-right: -20px; 
 
} 
 

 
#menu_bar { 
 
    background: rgba(9, 20, 164, 0.487); 
 
    display: block; 
 
    height: 35px; 
 
} 
 

 
#sub_menu_bar { 
 
    background: rgba(15, 230, 255, 0.539); 
 
    display: block; 
 
    height: 35px; 
 
} 
 

 
#contents { 
 
    background: pink; 
 
    height: 600px; 
 
    margin-top: 20px; 
 
} 
 

 
#recent_topics { 
 
    background: green; 
 
    height: 300px; 
 
    margin-top: 20px; 
 
} 
 

 
#stats { 
 
    background: orange; 
 
    height: 300px; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
}

<body> 
 
    <div id="menu_container"></div> 
 
    <div id="main_container"> 
 
    <div id="header"> 
 
     <div id="menu_bar"></div> 
 
     <div id="sub_menu_bar"></div> 
 
    </div> 
 
    <div id="contents"></div> 
 
    <div id="recent_topics"></div> 
 
    <div id="stats"></div> 
 
    </div> 
 
</body>

View on JSFiddle

Quelle

2016-07-29 VisualizeEdits

Haben Sie "schweben", wie in „[nebeneinander] bedeuten (https://css-tricks.com/all-about-floats/#article-header-id- 1) "? Oder wollen Sie nur, dass die zwei Divs am unteren Rand der Kopfzeile bleiben? – showdev

Hätte etwas deutlicher werden müssen, aber ich meinte, es bleibe am unteren Ende des Headers. – VisualizeEdits

Fügen Sie einfach ein weiteres div in die Kopfzeile ein und geben Sie ihm eine Höhe.

Ermöglicht weniger CSS und hilft semantisch zu trennen, was im Kopf ist. Sie sollten auch mehr semantische HTML-Tags wie <header></header> anstelle von <div id="header"></div>

Sie brauchen nicht einmal eine Höhe zum <div id="header_content"> hinzufügen, wenn Sie es die Höhe ihres Inhalts sein wollen.

#html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    outline: 0; 
 
    font-size: 100%; 
 
    vertical-align: baseline; 
 
    background: transparent; 
 
} 
 

 
body { 
 
    display: flex; 
 
} 
 

 
#menu_container { 
 
    display: block; 
 
    background: rgba(42, 42, 42, 0.496); 
 
    width: 250px; 
 
    height: 100%; 
 
} 
 

 
#main_container { 
 
    background: rgba(0, 0, 0, 0.526); 
 
    display: block; 
 
    height: 100%; 
 
    margin-left: auto; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    flex: 1; 
 
} 
 

 
#header { 
 
    background: rgba(255, 0, 0, 0.526); 
 
    margin-left: -20px; 
 
    margin-right: -20px; 
 
    position: relative; 
 
} 
 

 
#header_content{ 
 
    height: 50px; 
 
} 
 

 
#menu_bar { 
 
    background: rgba(9, 20, 164, 0.487); 
 
    display: block; 
 
    height: 35px; 
 
} 
 

 
#sub_menu_bar { 
 
    background: rgba(15, 230, 255, 0.539); 
 
    display: block; 
 
    height: 35px; 
 
} 
 

 
#contents { 
 
    background: pink; 
 
    height: 600px; 
 
    margin-top: 20px; 
 
} 
 

 
#recent_topics { 
 
    background: green; 
 
    height: 300px; 
 
    margin-top: 20px; 
 
} 
 

 
#stats { 
 
    background: orange; 
 
    height: 300px; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
}

<body> 
 
    <div id="menu_container"></div> 
 
    <div id="main_container"> 
 
    <div id="header"> 
 
     <div id="header_content"></div> 
 
     <div id="menu_bar"></div> 
 
     <div id="sub_menu_bar"></div> 
 
    </div> 
 
    <div id="contents"></div> 
 
    <div id="recent_topics"></div> 
 
    <div id="stats"></div> 
 
    </div> 
 
</body>

Quelle

2016-07-29 16:57:42 DirtyRedz

Dies funktioniert auch perfekt! Es ist immer schön, einen anderen Weg zu finden, dies zu tun. Schätze die Unterstützung! Ich denke, Showdev Antwort war ein bisschen sauberer hinzuzufügen, aber das war gut! – VisualizeEdits

Nur zur Klarstellung, ich habe keine Antwort gepostet. – showdev

Das macht Sinn, je mehr ich über diese Antwort nachdenke, desto mehr merke ich, wie viel mir das auf die Dauer helfen könnte. – VisualizeEdits

ich nicht position: absolute empfehlen, aber wenn nötig, wie dies tun.

Hier habe ich position: relative;-#header und gab die #menu_bar ‚s Regel dieses Update

left: 0; 
width: 100%; 
position: absolute; 
bottom: 35px;

und #sub_menu_bar Regel diese

left: 0; 
    width: 100%; 
    position: absolute; 
    bottom: 0;

#html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    outline: 0; 
 
    font-size: 100%; 
 
    vertical-align: baseline; 
 
    background: transparent; 
 
} 
 

 
body { 
 
    display: flex; 
 
} 
 

 
#menu_container { 
 
    display: block; 
 
    background: rgba(42, 42, 42, 0.496); 
 
    width: 250px; 
 
    height: 100%; 
 
} 
 

 
#main_container { 
 
    background: rgba(0, 0, 0, 0.526); 
 
    display: block; 
 
    height: 100%; 
 
    margin-left: auto; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    flex: 1; 
 
} 
 

 
#header { 
 
    background: rgba(255, 0, 0, 0.526); 
 
    height: 120px; 
 
    margin-left: -20px; 
 
    margin-right: -20px; 
 
    position: relative; 
 
} 
 

 
#menu_bar { 
 
    background: rgba(9, 20, 164, 0.487); 
 
    display: block; 
 
    height: 35px; 
 
    left: 0; 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom: 35px; 
 
} 
 

 
#sub_menu_bar { 
 
    background: rgba(15, 230, 255, 0.539); 
 
    display: block; 
 
    height: 35px; 
 
    left: 0; 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 

 
#contents { 
 
    background: pink; 
 
    height: 600px; 
 
    margin-top: 20px; 
 
} 
 

 
#recent_topics { 
 
    background: green; 
 
    height: 300px; 
 
    margin-top: 20px; 
 
} 
 

 
#stats { 
 
    background: orange; 
 
    height: 300px; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
}

<body> 
 
    <div id="menu_container"></div> 
 
    <div id="main_container"> 
 
    <div id="header"> 
 
     <div id="menu_bar"></div> 
 
     <div id="sub_menu_bar"></div> 
 
    </div> 
 
    <div id="contents"></div> 
 
    <div id="recent_topics"></div> 
 
    <div id="stats"></div> 
 
    </div> 
 
</body>

Quelle

2016-07-29 16:56:31 LGSon

Das war die genaue Antwort, die ich brauchte! Freut mich zu sehen, wo ich mich hätte verbessern können! Hoffentlich hilft das auch vielen anderen. Vielen Dank! – VisualizeEdits

@VisualizeEdits Danke, obwohl ich empfehle, mit _DirtyRedz_ Antwort gehen, wie die Verwendung von 'Position: absolute' ist nicht ein guter Weg, wenn nicht benötigt ... und Sie brauchen es nicht – LGSon

Wie schweben 2 divs am unteren Rand eines div

Antwort

Verwandte Themen