0

不知何故，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>

以下是继承它的页面部分：

销售.aspx：

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

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

我希望那个特别的东西能填满右边的其余空间。

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

截屏

4

2 回答 2

3

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

所以设置

 .page{
    width:100%;
    position:relative
  }
于 2013-10-21T14:58:47.317 回答
1

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

.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;
}
于 2013-10-21T14:57:33.053 回答