Каким-то образом CSS идет наперекосяк.
В моем классе CSS раздел maincontent
определяется как
.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, у меня это осталось:
<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>
Вот раздел со страницы, которая наследует его:
<asp:Content ID="mainContent" ContentPlaceHolderID="MainContent" runat="server">
<table border="1" >
... // lots of rows and columns
</table>
...
Итак, кто-нибудь понимает, почему я вижу 102px для ширины таблицы ниже?
Я хотел бы, чтобы этот конкретный вопрос заполнил остальную часть пространства справа.
Проблема в том, что maincontent div
не знает, что он должен быть на 100%, это будет 100% от размера его ближайшей position:relative
(или absolute
) родителя.
Таким образом,
.page{
width:100%;
position:relative
}
Когда вы абсолютное положение что-то браузер должен знать, что с абсолютной позиции его против. Если не создается позиционирующий контекст, он просто позиционирует его против тела. Вам нужно создать новый контекст позиционирования для родительского контейнера, в данном случае "страница",
.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 вправо, см. здесь .
.page
position:relative
и вы не указали main ширину, чтобы maincontent не знал, что взять 100%width
установлена в 100%, таким образом где-то ширина его родителя составляет 102 пикселя. Или процент, равный 102px