Как растянуть div до края страницы? - HTML и CSS

TasMan · 17.05.2011, 12:19

Привет!
Мне необходимо растянуть красный див до края страницы (см. скрин). На данный момент он растягивается ЗА край из-за чего появляется скролл. Никак не соображу как его убрать, помогите пожалуйста!

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            background: #ffffff;
        }
         
        #container {
            position: relative;
            width: 100%;
            height: 100%;
            background: #CCCCCC;
        }
         
        #page_content {
            position: relative;
            height: 100%;
            width: 1020px; /* Content width */
            left: 50%; /*  Screen middle */
            margin-left: -510px; /* 510 * 2 = 1020 */
            background: #000000;
        }
         
        #search {
            position: absolute;
            left: 800px;
            top: 150px;
            width: 100%;
        }
        #search_box {
            position: relative;
            width: 100%;
            height: 50px;
            background: #FF0033;
        }
    </style>
</head>
<body>
    <div id="container">
         
        <div id="page_content">
            <div id="search">
                <div id="search_box">Search</div>
            </div>
        </div>
    </div>
</body>
</html>

Если в CSS для body прописать

Код HTML:

overflow:hidden;
position:fixed;

данную проблему это решает, но появляется другая - страница не скроллится вниз. Есть ли какое-то другое решение?

Smitt&Wesson · 17.05.2011, 12:52

Код большой. Решу за денюжку, ну, или сам...
Контакты в подписи.

ZvEr_HaCkEr · 17.05.2011, 16:32

А чем так не устраивает?

Код:

#container {
 position: relative;
 width: 100%;
 height: 100%;
 background: #CCCCCC;
 overflow:hidden;
}

dekameron · 18.05.2011, 15:59

А width: 800px; float: left; для левого блока и margin-left: 800px; для правого не поможет?

marccella · 22.05.2011, 00:37

Можно былобы изначально зделать все проще канешн, но не стану Тебе мозги пудрить.

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0 ;
            padding: 0;
            background: #ffffff;
        }

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

        #page_content {
            margin:0 auto;
            position: relative;
            height: 100%;
            width: 1020px; /* Content width */
            background: #000;
        }

        #search {
            position: relative;
            float: right;
            top: 150px;
            width: 510px;
        }
        #search_box {
            width: 100%;
            height: 50px;
            background: #FF0033;
        }
    </style>
</head>
<body>
    <div id="container">

        <div id="page_content">
            <div id="search">
                <div id="search_box">Search</div>
            </div>
        </div>
    </div>
</body>
</html>

Пойдет?

17.05.2011, 12:52	#2
Smitt&Wesson Старожил Регистрация: 31.05.2010 Сообщений: 13,543	Код большой. Решу за денюжку, ну, или сам... Контакты в подписи. Пиши пьяным, редактируй трезвым. Справочник по алгоритмам С++ Builder

17.05.2011, 16:32	#3
ZvEr_HaCkEr VisualC++/DirectX Форумчанин Регистрация: 16.07.2010 Сообщений: 831	А чем так не устраивает? Код: `#container { position: relative; width: 100%; height: 100%; background: #CCCCCC; overflow:hidden; }`

18.05.2011, 15:59	#4
dekameron Форумчанин Регистрация: 27.04.2010 Сообщений: 185	А width: 800px; float: left; для левого блока и margin-left: 800px; для правого не поможет? Помог - тырк на весы

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как растянуть div внутри ячейки таблицы?	Benderbej	HTML и CSS	6	28.08.2010 21:59
div тег как нижний слой для второго div тега	dadli	HTML и CSS	2	30.07.2010 01:12
Как отменить прозрачность div в прозрачном div	zeharon	HTML и CSS	0	24.07.2010 16:56
круглые края div	subbota	HTML и CSS	2	10.07.2010 18:35
растянуть div в другом div-e	slips	HTML и CSS	2	27.11.2009 15:43