CSS для тега DIV работает неправильно

Question

CSS для тега DIV работает неправильно

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 "Осмотреть элемент" Снимок экрана:

jp2code 21 окт. 2013, в 17:01

Источник

0

вам нужно сделать .page position:relative и вы не указали main ширину, чтобы maincontent не знал, что взять 100%
Pete 21 окт. 2013, в 14:55
0

width установлена в 100%, таким образом где-то ширина его родителя составляет 102 пикселя. Или процент, равный 102px
ediblecode 21 окт. 2013, в 14:56
0

Чувак, этот форум БОЛЬШОЙ! Я знал, что это должно быть что-то простое, но я не знал, что.
jp2code 21 окт. 2013, в 15:02

Показать ещё 1 комментарий

Теги:

html

css

master-pages

2 ответа

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

David Randall 21 окт. 2013, в 13:36

0

margin-left (или удаление моего атрибута position ), похоже, отбросило мой тег DIV вправо, см. здесь .
jp2code 21 окт. 2013, в 15:21
0

Я должен был повторно применить свою позицию.
jp2code 21 окт. 2013, в 15:43

Ещё вопросы

вам нужно сделать .page position:relative и вы не указали main ширину, чтобы maincontent не знал, что взять 100%
width установлена в 100%, таким образом где-то ширина его родителя составляет 102 пикселя. Или процент, равный 102px
Чувак, этот форум БОЛЬШОЙ! Я знал, что это должно быть что-то простое, но я не знал, что.
margin-left (или удаление моего атрибута position ), похоже, отбросило мой тег DIV вправо, см. здесь .
Я должен был повторно применить свою позицию.

Adam Jessop · Accepted Answer · 2013-10-21T13-30-00.000Z

Проблема в том, что maincontent div не знает, что он должен быть на 100%, это будет 100% от размера его ближайшей position:relative (или absolute) родителя.

Таким образом,

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

Добро пожаловать, Адам! Спасибо за помощь.