Столбцы CSS уменьшаются на 100% - PullRequest
Новая
       15

Столбцы CSS уменьшаются на 100%

0 голосов
/ 16 ноября 2009

У меня есть страница, которая разделена на 3 деления, слева по центру и справа. Я не хочу отображать что-либо слева и справа, они просто обрамляют страницу. 

    #leftDiv
{
    background-color: Gray;
    width: 10%;
    left: 0px;
    top: 0px;
    position: absolute;
    height: 100%;
}

#rightDiv
{
    background-color: Gray;
    height: 100%;
    width: 10%;
    left: 90%;
    top: 0px;
    position: absolute;
    clear:both;
}

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

Чтобы исправить это, я вставил следующий код в 

if ($("#leftDiv").length == 1) {
                $("#leftDiv").height($("body").height() + "px");
            }
            if ($("#rightDiv").length == 1) {
                $("#rightDiv").height($("body").height() + "px"); ;
            }

это работает нормально, пока пользователь не выберет меньшее значение, чем размер страницы, после выбора большего значения. Тогда левый и правый дивы устанавливаются менее чем на 100%. Что мне нужно, так это способ выяснить, что такое 100% в пикселях, а затем я могу сравнить это с высотой тела и решить, что больше.

Есть идеи?

Спасибо

John

Ответы [ 3 ]

3 голосов
/ 16 ноября 2009

Почему вы создаете пустые элементы для оформления страницы? Как насчет установки body фона на нужный вам цвет и: 

#center_div {width: /* whatever */;
             margin: 0 auto; /* to center in the viewport */
             overflow: auto; /* or visible */
}

Вы можете оставить свойство overflow и просто использовать min-width вместо width (я не помню, насколько это совместимо с различными браузерами), чтобы определить «нормальную» ширину, в способ, которым содержимое заставит div увеличиваться, как требуется для отображения содержимого.

3 голосов
/ 16 ноября 2009

Использование margin: 0 auto

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

#mainDiv {
  width: 80%;
  margin: 0 auto;
}
0 голосов
/ 16 ноября 2009

Если левый и правый элементы div не имеют никакого содержимого, то нет необходимости, чтобы они были отдельными элементами div: вместо этого примените их форматирование к вашему контейнеру div, и отцентрируйте содержимое div с помощью margin: 0 auto. Очевидно, вам нужно дать контейнеру div заданную ширину и непрозрачный фон. Затем вы можете позволить браузеру позаботиться об изменении размера окна по мере необходимости - вам не нужно заново изобретать колесо для этой части.

CSS: 

#container {background-color:gray;}
#content {background-color:white;width:80%;margin:0 auto;}

Html: 

...
<body>
<div id="container">
<div id="content">
...your content here...
</div>
</div>
</body>
...

(Если на вашей странице нет контейнера div, вы можете вместо этого применить цвет фона к элементу body и сохранить еще больше кода.)

...