Должен ли я иметь div с шириной 100%, когда содержимое вызывает горизонтальную прокрутку? - PullRequest
1 голос
/ 21 февраля 2012

У меня есть веб-страница, где у меня есть раздел заголовка, а затем некоторый контент.В содержании у меня есть сетка, и некоторые виды отображают множество столбцов, которые (в зависимости от размера экрана) создадут горизонтальную полосу прокрутки в браузере)

мой HTML выглядит примерно так:

 <head></head>
 <body>
      <div id="TopHeader"></div>
      <div id="MainContent"></div>
 </body>

, поэтому часто содержимое , находящееся внутри «MainContent», шире, чем экран .Прямо сейчас у меня есть мой CSS для моего div, как это:

 #TopHeader {
    background-color: black;
}

, но когда я прокручиваю вправо, фон этого раздела белый.Я попытался решить эту проблему следующим образом:

#TopHeader {
min-width:1150px;
    background-color: black;
 }

, что немного помогает, но это жестко закодированное решение, и если ширина оказывается> 1150px, я сталкиваюсь с той же проблемой.

Единственное, о чем я могу думать, это поместить TopHeader внутрь main (что и исправит это).что-то вроде этого:

 <head></head>
 <body>
      <div id="MainContent">
            <div id="TopHeader"></div>
       </div>
 </body>

но проблема в том, что я хочу заполнить свой контент (что было в разделе MainContent, и я не хочу, чтобы этот отступ был вокруг верхнего заголовка, такэто не похоже на работу. Если я создаю новый div вроде этого

 <head></head>
 <body>
      <div id="MainContent">
            <div id="TopHeader"></div>
            <div id="InnerMainForPadding"></div>
       </div>
 </body>

, я возвращаюсь к первоначальной проблеме, указанной выше.

Есть предложения?

Ответы [ 2 ]

2 голосов
/ 21 февраля 2012

Как насчет наличия полосы прокрутки на оболочке содержимого вместо окна браузера?

#MainContent {
    overflow: auto;
}

Демонстрационная версия: http://jsfiddle.net/SUfkh/2/show/

2 голосов
/ 21 февраля 2012

Измените его на:

html, body, #TopHeader { 
    background-color: black; 
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...