100% ширина CSS при изменении размера браузера
Привет всем, я пытаюсь создать макет с помощью CSS и столкнулся со странной проблемой. Что ж, странно для меня. У меня есть 3 блока Заголовок , Нижний колонтитул и область MainContent . Верхний и нижний колонтитулы должны оставаться постоянной шириной 100%, в то время как область MainContent должна быть зафиксирована по центру на 996 пикселей; Это все нормально, однако, когда я изменяю размер окна браузера до ширины ниже 996 пикселей, а затем прокручиваю содержимое окна вправо, верхний и нижний колонтитулы 100% кажутся усеченными и больше не являются 100%. Я создал небольшой скрипт, чтобы проиллюстрировать проблему (встроенные стили, чтобы он был компактным). Я знаю, что могу добавить overflow: hidden в каждый из контейнеров, чтобы отключить полосы прокрутки при изменении размера окна. Я также написал небольшой фрагмент jQuery, чтобы вернуть div обратно в Верхний и нижний колонтитулы должны оставаться постоянной шириной 100%, в то время как область MainContent должна быть зафиксирована по центру на 996 пикселей; Это все нормально, однако, когда я изменяю размер окна браузера до ширины ниже 996 пикселей, а затем прокручиваю содержимое окна вправо, верхний и нижний колонтитулы 100% кажутся усеченными и больше не являются 100%. Я создал небольшой скрипт, чтобы проиллюстрировать проблему (встроенные стили, чтобы он был компактным). Я знаю, что могу добавить overflow: hidden в каждый из контейнеров, чтобы отключить полосы прокрутки при изменении размера окна. Я также написал небольшой фрагмент jQuery, чтобы вернуть div обратно в Верхний и нижний колонтитулы должны оставаться постоянной шириной 100%, в то время как область MainContent должна быть зафиксирована по центру на 996 пикселей; Это все нормально, однако, когда я изменяю размер окна браузера до ширины ниже 996 пикселей, а затем прокручиваю содержимое окна вправо, верхний и нижний колонтитулы 100% кажутся усеченными и больше не являются 100%. Я создал небольшой скрипт, чтобы проиллюстрировать проблему (встроенные стили, чтобы он был компактным). Я знаю, что могу добавить overflow: hidden в каждый из контейнеров, чтобы отключить полосы прокрутки при изменении размера окна. Я также написал небольшой фрагмент jQuery, чтобы вернуть div обратно в Чтобы проиллюстрировать проблему, я придумал небольшой скрипт (встроенные стили, чтобы он был компактным). Я знаю, что могу добавить overflow: hidden в каждый из контейнеров, чтобы отключить полосы прокрутки при изменении размера окна. Я также написал небольшой фрагмент jQuery, чтобы вернуть div обратно в Чтобы проиллюстрировать проблему, я придумал небольшой скрипт (встроенные стили, чтобы он был компактным). Я знаю, что могу добавить overflow: hidden в каждый из контейнеров, чтобы отключить полосы прокрутки при изменении размера окна. Я также написал небольшой фрагмент jQuery, чтобы вернуть div обратно в ширину, если ширина опускается ниже определенной ширины. Однако мой вопрос касается CSS, есть ли лучшее исправление для этой проблемы на чистом CSS? Или кто-нибудь может объяснить, почему это происходит? Заранее спасибо! DotsC
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div width test</title>
</head>
<body style="border:none; margin:0; padding:0; height:100%; width:100%">
<div id="header-content" style="width:100%; margin:0; padding:0; background-color:#0000ff; height:50px"></div>
<div id="main-content" style="width:996px; margin:0; padding:0; background-color:#ff00ff; height:250px; margin:auto">
<div id="inner-content">
CONTENT OF THE PAGE HERE
</div>
</div>
<div id="footer-content" style="width:100%; margin:0; padding:0; background-color:#00ffff; height:70px"></div>
</body>