Форум PHP программистов > Ребят выручайте!!!)))

[ Поиск ] - [ Пользователи ] - [ Календарь ]

major28

5.07.2011 - 14:18

Здравствуйте!
У меня следующая схема


<body>

   <div class="main">
          <div class="header"></div>
          <div class="content"></div>
   </div>

</body>

вообщем мне нужно чтобы блок main всегда был на всю ширину и высоту экрана, внутри него сверху была шапка header с фиксированной высотой, а ниже шла контентная часть которая бы тоже растягивалась до нижней границы экрана. Помогите это осуществить, а то я ставлю высоту 100% и все равно не получается. Зарание спасибо!!!

Спустя 3 минуты, 1 секунда (5.07.2011 - 13:21) m4a1fox написал(а):

width: 100%;

Спустя 1 минута, 59 секунд (5.07.2011 - 13:23) major28 написал(а):

что width: 100%; ?

я же говорю что ставлю блоку content width 100% и height 100% и все равно он не растягивается на всю оставшуюся высоту экрана, а отображается ввиде полоски

Спустя 17 минут, 25 секунд (5.07.2011 - 13:40) major28 написал(а):

Ребят выручайте!!!!))

Спустя 11 минут, 6 секунд (5.07.2011 - 13:51) major28 написал(а):

Ребята!!! очень срочно нужно)) полюбому кто нить сталкивался с данной проблемой)))

Спустя 29 секунд (5.07.2011 - 13:52) DySprozin написал(а):

major28
оно?

<style type="text/css">
 .content {
  background-color:green;
  height:100%;
}
 .main {
  background-color:red;
  height:100%;
}
</style>

<body>

   <div class="main">
          <div class="header">header</div>
          <div class="content">header</div>
   </div>

</body>

Спустя 3 минуты, 16 секунд (5.07.2011 - 13:55) major28 написал(а):

DySprozin у тебя же ничего не растягивается просто две полоски и все

Спустя 39 секунд (5.07.2011 - 13:56) DySprozin написал(а):

major28
браузер, версия?

Спустя 2 минуты, 14 секунд (5.07.2011 - 13:58) major28 написал(а):

chrome opera
мне надо чтобы вариант кроссбраузерный был

Спустя 12 минут, 19 секунд (5.07.2011 - 14:10) DySprozin написал(а):

major28
хром
http://s2.ipicture.ru/uploads/20110705/dvLTj2r4.jpg
опера
http://s2.ipicture.ru/uploads/20110705/RoRvguNt.jpg

не знаю, чего ты там мутишь );

Спустя 1 минута, 56 секунд (5.07.2011 - 14:12) Krevedko написал(а):


* {margin: 0; padding: 0;}
 html {height: 100%;}
 * html body {height: 100%;}
 body {min-height: 100%; position: relative;}
.main{min-height:100%;}

Спустя 10 минут, 6 секунд (5.07.2011 - 14:22) Renden написал(а):

major28
или так попробуй:


* {padding:0;margin:0;} 
html,body{height:100%;}
.main {width:100%;min-height:100%;position:relative;}
.header {height:100px;}
.content {min-height:100%;}

Спустя 9 минут, 9 секунд (5.07.2011 - 14:32) major28 написал(а):

DySprozin твое решение не подходит так как внизу остается пустое пространство равное высоте верхнего header

Спустя 17 минут, 17 секунд (5.07.2011 - 14:49) major28 написал(а):

Krevedko и Renden тоже не является решением

Спустя 25 минут, 1 секунда (5.07.2011 - 15:14) tatti написал(а):

major28
content сам растянется в зависимости от наполнения максимум до 100% потом покажет скролл.

<!DOCTYPE html >
<html>
<head>
<title>Если человек дурак, то это надолго!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
BODY {
    margin:0;
    padding:0;
    background: blue;
}
BODY , .main , .header , .content {width:100%;}
.header {
    height: 100px;
    background: yellow;
}
.content {
    position:fixed;
}
</style>
</head>
<body>
    <div class="main">
        <div class="header">header</div>
        <div class="content">content</div>
    </div>
</body>
</html>

Спустя 12 минут, 11 секунд (5.07.2011 - 15:26) major28 написал(а):

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

Спустя 4 минуты, 4 секунды (5.07.2011 - 15:30) tatti написал(а):

major28
css так с % не работает. указывай точные координаты в пикселах в .content и добавляй overflow:scroll; подругому никак.

Спустя 7 минут, 32 секунды (5.07.2011 - 15:38) major28 написал(а):

tatti css с % работает нормально) просто надо знать как их применить)) знаю точно что решение есть) просто не знаю какое решение)

Спустя 3 минуты, 57 секунд (5.07.2011 - 15:42) tatti написал(а):

major28
никто и не говорит что css ненормально работает. просто люди не всегда поинмают что им надо и зачем

Спустя 24 секунды (5.07.2011 - 15:42) Krevedko написал(а):

до можно там все. в гугле миллион решений

Спустя 2 минуты, 22 секунды (5.07.2011 - 15:44) tatti написал(а):

Цитата (major28 @ 5.07.2011 - 12:26)

должен быть растянут на всю оставшуюся высоту

body отлично для этого подходит. зачем привинчивать 5-ое колесо?

Спустя 3 минуты, 35 секунд (5.07.2011 - 15:48) major28 написал(а):

tatti для того чтобы при изминении высоты header фон в контейнере content начинался всегда с одной позиции

Спустя 2 минуты, 51 секунда (5.07.2011 - 15:51) tatti написал(а):

Цитата (major28 @ 5.07.2011 - 10:18)

header с фиксированной высотой

Цитата (major28 @ 5.07.2011 - 12:48)

чтобы при изминении высоты header

ты сам себе противоречишь.

мой пример в точности решает поставленную тобой задачу. тема исчерпана

Спустя 18 минут, 49 секунд (5.07.2011 - 16:10) major28 написал(а):

tatti header фиксирована, но вдруг если мне потом придется добавить в блок header что то новое и увиличить высоту header мне не придется залазить в другие блоки чтобы все опять подгонять.

Цитата

мой пример в точности решает поставленную тобой задачу. тема исчерпана

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

Спустя 10 минут, 49 секунд (5.07.2011 - 16:20) tatti написал(а):

Цитата (major28 @ 5.07.2011 - 13:10)

блок content у тебя не растягивается на всю оставшуюся высоту

<!DOCTYPE html >
<html>
<head>
<title>Если человек дурак, то это надолго!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
BODY {
    margin:0;
    padding:0;
    background: blue;
}
BODY , .main , .header , .content {width:100%;}
.header {
    height: 100px;
    background: yellow;
}
.content {
    position:fixed;
}
</style>
</head>
<body>
    <div class="main">
        <div class="header">header</div>
        <div class="content">
            content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
            content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
            content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
            content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
            content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
            content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
            content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
            content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
            content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
            content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
            content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
            content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />
        </div>
    </div>
</body>
</html>

а ты проверь сначала а потом говори

Спустя 8 минут, 7 секунд (5.07.2011 - 16:29) major28 написал(а):

у тебя content не растягивается на всю высоту экрана

Спустя 2 минуты, 5 секунд (5.07.2011 - 16:31) Renden написал(а):

major28
Проще всего сделать так, и не заморачиватся


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {padding:0;margin:0;} 
html,body{height:100%;}
.header {width:100%;height:100px;background:red;}
.content {width:100%;min-height:100%;background:green;}
</style>
</head>
<body> 
        <div class="content">
            <div class="header"></div>

        </div>
</body>
</html>

Спустя 3 минуты, 13 секунд (5.07.2011 - 16:34) tatti написал(а):

Renden
проще всего перенести контент в бади а контент вообще удалить

Спустя 2 минуты, 57 секунд (5.07.2011 - 16:37) Renden написал(а):

tatti
контент будет нужен в бальнейшем (хорошо опечатался гыггы) чтоб прилепить футер, чтоб было типа того:


<body> 
        <div class="content">
            <div class="header"></div>
            <div class="menu"></div>
             и тп
        </div>
        <div class="footer"></div>
</body>

Спустя 3 минуты, 22 секунды (5.07.2011 - 16:40) tatti написал(а):

Renden
мыж говорим про самый простой а это уже слишком сложно для меня

тем более что поставленую задачу в топе решает

Спустя 4 часа, 50 минут, 19 секунд (5.07.2011 - 21:31) major28 написал(а):

Цитата

мыж говорим про самый простой а это уже слишком сложно для меня

мы это кто?)

Быстрый ответ:

Здесь расположена полная версия этой страницы.