Основная часть CSS не распространяется на страницу? - PullRequest
Новая
       3

Основная часть CSS не распространяется на страницу?

0 голосов
/ 01 сентября 2010

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

Основная часть моих страниц (белая область в ссылке ниже) должна простираться от навигации до нижнего колонтитула, но только на определенных страницах.

Нижний колонтитул автоматически помещается внизу каждой страницы независимо от высоты (т. Е. Будет находиться внизу страницы на странице высотой 400 пикселей).

Возможно ли, что я просто упускаю что-то очень простое?

Я разместил ссылку на версию сайта на сайте:

www.contendertest.com

Страницы, с которыми у меня возникли проблемы, - это указатель и ссылка «зарегистрироваться».

Ответы [ 4 ]

2 голосов
/ 01 сентября 2010

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

РЕДАКТИРОВАТЬ: добавить строку padding-bottom: 100px к #bodyContainer и margin-top: от -100px до #footer, и это будет работать.

1 голос
/ 01 сентября 2010

Попробуй это.Конечно, не с встроенным CSS, как мой. 

<html>
<head>
    <title>DIV Test</title>
    <style>
        body {
            margin: 0;
        }

        #container {
            height: 100%;
            width: 100%;
        }

        #header {
            background: #0000FF;
            position: absolute;
            top: 0;
            height: 100px;
            width: 100%;
        }

        #content {
            background: #FF0000;
            height: auto;
            width: 100%;
        }

        #footer {
            background: #00FF00;
            position: absolute;
            bottom: 0;
            height: 100px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header"><!-- header content here --></div>
        <div id="content"><!-- main content here --></div>
        <div id="footer"><!-- footer content here --></div>
    </div>
</body>

Надеюсь, это поможет вам.

РЕДАКТИРОВАТЬ: указать, что решение.Посмотрите на атрибуты позиции верхнего и нижнего колонтитула CSS.Это должно решить это.

1 голос
/ 01 сентября 2010

Дайте вашему #wrapper div фоновое изображение, которое будет шириной и цветом области содержимого с помощью repeat-y.

Редактировать: Также центрируйте фоновое изображение!

0 голосов
/ 01 сентября 2010

style.css, строка 16, удалить высота: 100%

сейчас 

html, body {
  background-color:#EDEDE1;
  color:#666666;
  font:12px Helvetica,Arial,sans-serif;
  height:100%;
  margin:0;
  padding:0;
  text-align:justify;
}

после 

html, body {
  background-color:#EDEDE1;
  color:#666666;
  font:12px Helvetica,Arial,sans-serif;
  margin:0;
  padding:0;
  text-align:justify;
}
...