文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在div的底部浮动2个div

问如何在div的底部浮动2个div
EN

Stack Overflow用户

提问于 2016-07-30 00:42:20

回答 2查看 67关注 0票数 0

我尝试使用以下命令设置我的头文件(包含2个div)

position: relative;

和标头中的两个div，使用

position: absolute;
bottom: 0;

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

我怎样才能做到这一点呢？

#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

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-07-30 00:57:42

只需在头文件中添加另一个div并给它一个高度即可。

允许较少的CSS，并有助于从语义上分离头部中的内容。您还应该使用更多的语义html标记，比如用<header></header>代替<div id="header"></div>。

如果您希望<div id="header_content">的高度为其内容的高度，则甚至不需要向其添加高度。

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

票数 1

Stack Overflow用户

发布于 2016-07-30 00:56:32

我建议不要使用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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38663720

复制

相似问题

问如何在div的底部浮动2个div
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在div的底部浮动2个divEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在div的底部浮动2个div
EN