时间戳

首页 > 解决方案 > 在 HTML body 标签中构建 3 个不同的部分

html - 在 HTML body 标签中构建 3 个不同的部分

问题描述

我一直在尝试设置我的网站主体，使其由三个部分组成——主要部分（用于幻灯片/图像）、中间部分（白色背景）和页脚（灰色背景）。我该怎么做呢？到目前为止，我已经尝试扩展一个制作简单页脚的教程，以允许我添加第三部分。我的 HTML 和 CSS 片段如下：

索引.html

<body bgcolor="#212121">
    <div id="wrapper">
        <div id="content">
            <p>text</p>
        </div>
    </div>
    <div id="midsection"><div id="mid-content">Mid</div></footer>
    <footer id="footer"><div class="footer">Footer</div></footer>
</body>

样式.css

html, body {
    margin: 0px;
    padding: 0px;
    min-height: 100%;
    height: 100%;
}

  #wrapper {
    background-color: #212121;
    min-height: 100%;
    height: auto !important;
    margin-bottom: -300px; /* the bottom margin is the negative value of the footer's total height */
  }
  
  #wrapper:after {
    content: "";
    display: block;
    height: 300px; /* the footer's total height */
  }
  
  #content {
    height: 100%;
  }
  
  #midsection {
    height: 300px; /* the footer's total height */
    margin-bottom: -100px;
  }

  #midsection:after {
    content: "";
    display: block;
    height: 100px;
  }
  
#mid-content {
    background-color: #f9f9f9;
    height: 284px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
    padding: 8px;
  }

/* main image section (wrapper) + mid section */


#footer {
    height: 100px;
}

#footer-content {
    background-color: #808080;
}

理想情况下，我希望中间部分为 300 像素，页脚为 100 像素。

标签： htmlcss

解决方案

这个怎么样：

html中有一些错误。记得正确关闭 html 标签。希望这可以帮助。

html:

<body>
  <div id="wrapper">
    <div id="content">
      <p>text</p>
    </div>
  </div>

  <div id="midsection">
    <div id="mid-content">Mid</div>
  </div>

  <footer id="footer">
    <div class="footer">Footer</div>       
  </footer>
</body>

CSS：

html, body {
    margin: 0px;
    padding: 0px;
    min-height: 100%;
    height: 100%;
    background-color: #212121;
}

  #wrapper {

    min-height: 100%;
    height: auto !important;
    margin-bottom: -300px; /* the bottom margin is the negative value of the footer's total height */
  }

  #wrapper:after {
    content: "";
    display: block;
    height: 300px; /* the footer's total height */
  }

  #content {
    height: 100%;
  }

  #midsection {
    background-color: white;
    height: 300px; /* the footer's total height */
    margin-bottom: -100px;
  }

  #midsection:after {
    content: "";
    display: block;
    height: 100px;
  }

#footer {
  background-color: #212121;
  height: 200px;
}

推荐阅读