Question

我已尝试使用

设置标题（包含2个div）

position: relative;

并且标题内的两个div都带有

position: absolute;
bottom: 0;

但我希望紫色#menu_bar和蓝色#sub_menu_bar div浮动在红色#header div的底部。

我怎样才能做到这一点？

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

View on JSFiddle

Answer 1

只需在标题中添加另一个div并为其指定高度。

允许更少的CSS，并帮助在语义上分离头部内的什么。您还应该使用更多语义html标记，例如<header></header>代替<div id="header"></div>

如果您想让它成为其内容的高度，您甚至不需要为<div id="header_content">添加高度。

＆＃13;

  #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;
}

＆＃13;

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

＆＃13;

Answer 2

我建议不要使用position: absolute，但如果需要，请执行此操作。

我已将position: relative;添加到#header，并为此更新提供了#menu_bar的规则

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

和#sub_menu_bar统治此

  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>

如何在div底部浮动2个div

2 个答案: