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 ？

我希望能够将剩下的空间填充到右边。

Google Chrome“Inspect Element”屏幕截图：

screenshot

Answer 1

问题是主要内容div不知道应该是100％的内容，它将是其最近position:relative（或{{1}大小的100％父母。

所以设置

absolute

Answer 2

当您绝对定位某些内容时，浏览器需要知道将其绝对定位的内容。如果没有创建positining context，它将简单地将它定位在body上。您需要为父容器创建一个新的定位上下文，在本例中为“page”

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

DIV标记的CSS工作不正常

CSS：

的Site.Master：

Sales.aspx：

Google Chrome“Inspect Element”屏幕截图：

2 个答案: