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>

それを継承するページのセクションは次のとおりです。

Sales.aspx:

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

では、下の表の幅が102pxになっている理由を誰か理解していますか?

右側の残りのスペースを埋めたいと思います。

Google Chrome の「要素の検査」スクリーンショット:

スクリーンショット

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 に答える