DIV 标签的 CSS 工作不正常答案

【问题标题】：CSS for DIV tag is working incorrectlyDIV 标签的 CSS 工作不正常
【发布时间】：2013-10-21 23:05:59
【问题描述】：

不知何故，CSS 出了问题。

在我的 CSS 类中，maincontent 部分定义为

CSS：

.page {
  background: #B5AAAA; /* Hoof color */
  margin: 20px auto 0px auto;
}
.main {
  position: absolute;
  /* I commented this out because it is new to me.
     I was not sure if it was causing my issues or not.
  min-height: 420px;
  min-width: 960px;
  */
  top:150px;
}
.maincontent {
  background-color: #F2E6E6; /* Almost white, just a tad on the maroon side */
  position:absolute;
  border: 1px solid #4D0000;
  overflow: auto;
  left:110px;
  top:0px;
  height: 500px;
  width:100%;
}

删除我的 Site.Master 的 HTML 中所有不相关的部分，我剩下这个：

Site.Master：

<body>
  <form runat="server">
    <asp:scriptmanager runat="server"></asp:scriptmanager>
    <div class="page">
      <div class="main">
        <div class="maincontent">
          <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
      </div>
    </div>
  </form>
</body>

这是继承它的页面部分：

Sales.aspx：

<asp:Content ID="mainContent" ContentPlaceHolderID="MainContent" runat="server">
  <table border="1" >
  ... // lots of rows and columns
  </table>
  ...

那么，有谁明白为什么我看到下面表格的宽度为 102px？

我想用那个来填充右边的剩余空间。

谷歌浏览器“检查元素”截图：

【问题讨论】：

你需要使 .page position:relative 并且你没有给 main 一个宽度，所以 maincontent 不会知道 100% 的内容
width 设置为 100%，因此某处它的父级宽度为 102px。或等于 102px 的百分比
伙计，这个论坛很棒！我知道它一定很简单，但我不知道是什么。

标签： html css master-pages

【解决方案1】：

问题是主要内容 div 不知道它应该是 100% 的大小，它将是其最近的 position:relative（或 absolute）父级的 100%。

这样设置

 .page{
    width:100%;
    position:relative
  }

【讨论】：

欢迎来到 SO，亚当！感谢您的帮助。

【解决方案2】：

当您对某物进行绝对定位时，浏览器需要知道绝对定位它的对象是什么。如果没有创建定位上下文，它将简单地将其定位在身体上。您需要为父容器创建一个新的定位上下文，在本例中为“页面”

.page {
  position: relative;
  width: 100%;
}

编辑：

避免使用绝对定位并依靠边距进行布局会更安全：

.page {
  background: #B5AAAA; /* Hoof color */
  margin: 20px auto 0px auto;
  position: relative;
  width:100%;
}
.main {
  margin-top: 150px;
}
.maincontent {
   background-color: #F2E6E6; /* Almost white, just a tad on the maroon side */  
   border: 1px solid #4D0000;
   margin-left: 110px;
}

【讨论】：

margin-left（或删除我的 position 属性）似乎已将我的 DIV 标记扔到了右侧，请参阅here。
我不得不重新申请我的职位属性。