CSS / HTML - переполнение в макете одного столбца при изменении размера браузера - PullRequest
Новая
       14

CSS / HTML - переполнение в макете одного столбца при изменении размера браузера

0 голосов
/ 26 октября 2011

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

Моя проблема заключается в том, что когда я увеличиваю размер текста, нажимая ctrl + в браузере (Chrome), часть карусели переполняет фоновую область. Ниже приведены скриншоты до и после изменения размера.

Макет HTML / CSS кода прост, но я не могу понять, почему происходит переполнение. Есть идеи? Я новичок в CSS / XHTML - есть ли другие стандартные способы достижения того, чего я пытаюсь достичь?

Before resizing

After resizing

<html>
<head>
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="header_container">
    <div id="header">
        Header text
    </div>
</div>

<div id="content_container">
    <div id="content">
        The content

        <div id="carousel">
        The carousel
        </div>

        <div id="clear_div">
        </div>
    </div>
</div>

<div id="footer_container">
    <div id="footer">
        The footer
    </div>
</div>

</body>
</html>

Вот CSS для HTML: 

#header_container {
    width: 100%;
    background-color: green;
}

#header {
    width: 960px;
    margin: auto;
}

#content_container {
    width: 100%;
    background-color: lightblue;
}

#content {
    width: 960px;
    margin: auto;
    position: relative;
}

#carousel {
    float: right;
    width: 300px;
    height: 200px;
    background-color: red;
}

#clear_div {
    clear: both;
}

#footer_container {
    width: 100%;
    background-color: lightgray;
    clear: both;
}

#footer {
    width: 960px;
    margin: auto;
}

1 Ответ

1 голос
/ 26 октября 2011

Проблема в том, что "ширина: 100%;" # content_container (синий фон) вычисляется не по фактической ширине контента, а по ширине окна браузера.Таким образом, в тот момент, когда ширина окна становится меньше # content width (зафиксировано в 960px), # content начинает выходить из фона.

Пример:

  1. Ширина окна браузера составляет 500 пикселей.
  2. # content_container , # header_container и # footer_container"ширина: 100%"также становится 500px.
  3. # content width = 960px, что на 440px больше # content_container width.
  4. Таким образом, правая часть # содержимого получается из # content_container для 440 пикселей.

Затем вы увеличиваете размер в браузере, то же самое происходит( # content width становится больше, чем # content_container width).

Это можно исправить, например, добавив свойство "min-width: 960px;" # content_container , # header_container и # footer_container , поэтому они всегда будут одинаковой ширины или больше.

РЕДАКТИРОВАТЬ: см. пример в реальном времени с min-ширина: http://jsfiddle.net/Xqtuh/

...