Question

很抱歉，如果之前有人询问过，但我一直在寻找，但仍然无法提出基本设计来实现我想要的布局（确认我不想要顶部和底部的空白区域）

我主持一个个人摄影网站，在那里我将我的业余摄影发布给亲朋好友，我想让它看起来好一点，在我的脑海中，我希望每一页都不可滚动，我会确保内容合理地适应空间。

我目前并不担心移动设备和平板电脑设备的空间有限，因为我有基本的结构，我打算制作手机和平板电脑页面，以便我可以指定设计而不是流畅的网站。（我可能会在以后再讨论这个问题）

所以我想将下面的例子作为我的页面布局

我不确定我的代码与我的代码相差多远，我相信我已经差不多了，而且我只是错过了那个允许我的主div被限制在剩下的可用空间的位。在hr noshade结束之间的屏幕和在页脚div开始之前停止，这将允许诸如图片为div的100％高度，并且图片（或其他对象）将根据大小的大小重新调整大小。观景区

我真的很感激任何帮助，如果之前有人问过，我会再次道歉，我尽量不要建立一个表格格式的网站，因为我知道这是非常古老的编码方式

我已经做了一些研究，并且认为我可能需要使用jquery喷出文件/窗口的高度设置，但是我对此不熟悉我找不到一个好的例子

总而言之，我只想让主要的div从hr noshade行的底部延伸到页脚的顶部。

＆＃13;

@charset "utf-8";

/* CSS Document */

* {
  padding: 0px;
  margin: 0px;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
* html #outer {
  /* ie6 and under only*/
  height: 100%;
}
.content {
  padding-top: 20px;
}
.wrapper {
  min-height: 100%;
  margin: -20px auto 0;
  /*Change this to change height of footer must match .footer height number*/
  width: 70%;
}
.footer {
  height: 20px;
  /*Change this to change height of footer must match .wrapper margin -number*/
  background-color: #2C5463;
  text-align: center;
  width: 70%;
  color: #FCFCFC;
  margin-left: auto;
  margin-right: auto;
  border-radius: 151px;
}
.title {
  font-size: 50px;
  font-family: tangerine;
  font-style: normal;
  font-weight: 700;
  font-variant: normal;
  color: #2C5463;
  float: left;
  width: 100%;
  margin-bottom: 2px;
  margin-top: 10px;
}
.main {
  float: left;
  width: 100%;
  background-color: #F80307;
}
hr {
  border-radius: 208px;
  border-width: 2px;
  border-color: #2C5463;
}
.menu {
  text-align: center;
  color: #FCFCFC;
  background-color: #2C5463;
  float: left;
  width: 100px;
  margin-right: 5px;
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
  padding-left: 3px;
  border-radius: 38px;
}
.menu2 {
  text-align: center;
  color: #FCFCFC;
  background-color: #2C5463;
  float: Right;
  width: 100px;
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
  padding-left: 3px;
  border-radius: 38px;
}
.menuwrapper {
  width: 100%;
  float: left;
  margin-top: 2px;
  margin-bottom: 2px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>

  <!--Start of CSS Link-->
  <link href="test.css" rel="stylesheet" type="text/css">
  <style type="text/css">
    body {
      background-color: #e4e5e7;
    }
  </style>
  <!--End of CSS Link-->

  <!--Start of Fonts-->
  <script>
    var __adobewebfontsappname__ = "dreamweaver"
  </script>
  <script src="http://use.edgefonts.net/tangerine:n4,n7:default.js" type="text/javascript"></script>
  <!--End of Fonts-->

  <meta charset="utf-8">
</head>
<!--Start of Webpage-->

<body>
  <!--Start of Page Wrapper (no main content above this line-->
  <div class="wrapper">
    <!--Start of Main Content-->
    <div class="content">
      <!--Start of Page Content-->
      <!--Start of Title-->
      <div class="title">
        <p>Skc Photography</p>
      </div>
      <!--End of Title-->
      <!--Start of Member Login--
    <div class="login"><p>Member Login</p></div>
    <!--End of Member Login-->
      <!--Start of line-->
      <hr noshade>
      <!--Start of line-->
      <!--Start of Menu-->
      <div class="menuwrapper">
        <div class="menu">
          <p>Home</p>
        </div>
        <div class="menu">
          <p>Galleries</p>
        </div>
        <div class="menu">
          <p>Contact Me</p>
        </div>
        <div class="menu2">
          <p>Member Login</p>
        </div>
      </div>
      <!--End of Menu-->
      <!--Start of line-->
      <hr noshade>
      <!--Start of line-->
      <!--Start of Main Content-->
      <div class="main">This div needs to stretch to top of the Footer and not past it.
      </div>
      <!--End of Main Content-->
    </div>
    <!--End of Page Content-->
  </div>
  <!--End of Page Wrapper (no main content Below this line-->
  <!--Start of Footer-->
  <div class="footer">SKCPhotography - Copyright &copy; 2014</div>
  <!--End of Footer-->
</body>
<!--End of Webpage-->

</html>

＆＃13;

Answer 1

您只需向position: absolute div添加.main，然后添加父.wrapper position: relative，然后从那里开始工作，查看{{3} }}

.main{
    position: absolute;
    bottom: 0;
    top: 126px;/*the height of the header menu, hr etc.*/
    right: 0;
}
.wrapper{
    position: relative;
}

Answer 2

如果您将主div设置为高度计算100％减去已知高度因子（标题，菜单和页脚），则可以轻松实现该布局。

这是一个基于您的请求的简单结构化布局。你希望，你可以把它复制到你的喜欢中。

注意：查看时，请在整页中查看，因为该页面太小，无法显示主div

body, html { 
    width: 100%;
    height: 100%;
    margin: 0px;
}

#container { 
    width: 100%;
    height: 100%;
    padding: 10%;
    box-sizing: border-box;
}

#header {
    width: 100%;
    height: 30px;
    background: blue;
    text-align: center;
}

#menu {
    width: 100%;
    height: 20px;
    background: green;
    text-align: center;
}

#main {
    width: 100%;
    height: calc(100% - 70px);
    background: orange;
    text-align: center;
}

#footer {
    width: 100%;
    height: 20px;
    background: pink;
    text-align: center;
}

<div id="container">
  <div id="header">header</div>
  <div id="menu">Menu</div>
  <div id="main">Main</div>
  <div id="footer">Footer</div>
</div>

Answer 3

尝试更改css。在DOM中添加一个额外的元素，你就是完美的。所以你需要改变的CSS是

.wrapper {
    min-height: 100%;
    margin: -20px auto 0;
    width: 70%;
    position: relative;/*This is new*/
}    
.main {
    position: absolute;/*This is new*/
    /* float: left; */ REMOVE THIS
    width: 100%;
    height: 100%;/*This is new*/
    background-color: #F80307;
 }

在具有MAIN类的div中添加另一个将被定位为相对的div。

.new_div{
    position: relative;
}

全页面布局的基本设计

3 个答案: