HIEGTH 100%

axiles · December 1, 2011

Приветствую.

Заранее извиняюсь если подобная тема уже где то была на этом форуме, полазил по искал но ответа так и не нашол. В вёрстке новичёк поэтому не обесутте.

Сперва опишу что мне надо, а потом опишу как я пытаюсь это делаьт.

Мне надо страницу разбить на фреймы. Каждый фрейм будет окаймлён какой либо границей для визуальности, и в каждом фрейме будет выводится своя информация. Проблема в том что я не могу нарисовать это самое окаймление фреймов, ни таблицами ни дивами, вылазиют за пределы окна фрейма.

Вот по какому пути я шол.

Страница.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd">
<html >
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="mystyle2.css" />
</head>

<body >
  <div class="sloi1">
    главная
  </div>
</body>

</html>

к ней стили


div.sloi1 {
           border-top: solid 5px #000000;
           border-bottom: solid 5px #000000;
           border-left: solid 5px #000000;
           border-right: solid 5px #000000;
         }

100% ширины окна, высота по содержимому и отступ по периметру

пробую так


div.sloi1 {
           border-top: solid 5px #000000;
           border-bottom: solid 5px #000000;
           border-left: solid 5px #000000;
           border-right: solid 5px #000000;
           height: 100%;

нет изменений

гуглю

нашол совет, пробую


body.sloi1 {
             height: 100%;
             margin: 0px;
             padding: 0px;
            }

исчез отступ по периметру, а высоты то нет!

гуглю

нашол совет, пробую


html.sloi1 {
            height: 100%;
            margin: 0px;
            padding: 0px;
           }

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

Это я описал пример на одном окне, без фреймов, в фреймах ведёт себя точно так же.

Подскажите плиз как победить этот недуг?

Edited December 1, 2011 by axiles

ыра · December 1, 2011

у меня сейчас bottom:0; приделано - вроде не вылазит за окно, при наполнении текстом наверно вылезет

zSpx · December 1, 2011

height: 100% растягивает блок на высоту родителя. Дефолтная высота любого блока auto. Соответственно, что бы height: 100% работал, нужно либо задавать его всем родительским элементам в иерархии, либо задавать родителю фиксированную высоту.

axiles · December 2, 2011

Ну вот смотрите, в css для родительских элементов body и html я указал

height 100%

и

margin: 0px; padding: 0px;

что ещё может являться родителем для блока в данном случае?

sammasati · December 2, 2011

body.sloi1 {
             height: 100%;
             margin: 0px;
             padding: 0px;
            }
html.sloi1 {
            height: 100%;
            margin: 0px;
            padding: 0px;.
           }

Зачем тут указаны классы? Такие стили будут применяться только к body и html с классом sloi1. А вашем коде у body и html никаких классов нет.

<html >
<body >

axiles · December 2, 2011

я им прописываю классы, просто чтоб много не постить привёл примеры css

axiles · December 2, 2011

и вообще наблюдаю такую картину,

вместо дивов поставил таблицу со всеми теми же парамитрами стилей что и у дива,


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
   padding: 0;
   margin: 0;
   height: 100%;
   bottom: 0;
  }

html, body {
            height: 100%;
            padding: 0;
            margin: 0;
            bottom: 0;
           }
#sloi1 {
        border-bottom: 10px outset red;
        border-right: 10px outset red;
        border-top: 10px outset red;
        border-left: 10px outset red;
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
       }
</style>
</head>
<body>
<TABLE id="sloi1" >
    <TR >
      <TD >
       главная
      </TD>
    </TR>
</body>

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


html, body {
            height: 100%;
            padding: 0;
            margin: 5;
            bottom: 0;
           }

и у меня нижняя граница уходит за пределы окна и появляется полоса прокрутки, в то время как остальные границы отображаются как надо

а если поставить вместо таблицы див то с нулевыми отступами сразу же результат такой же как у таблицы с установленными отступами

Edited December 2, 2011 by axiles

zSpx · December 2, 2011

100% + 10px > 100% намек ясен?

Edited December 2, 2011 by zSpx

t.matik · December 3, 2011

Поэксперементируй с отрицательными margin.

Например у меня есть такая конструкция

  <div id="topLine">
    <div class="linesTile">
    </div>
    <div class="brPapper brTop"></div>
  </div>

и соответственно css для него

#topLine{
	height:5%;
	margin-top:-14px;}
.linesTile{
	background:url(/css/imgs/bottomtile.jpg);
	height:100%;}
.brPapper{
	background-image:url(/css/imgs/borderline.png);
	background-repeat:repeat-x;}
.brTop{
	height:14px;
	background-position:0 -11px;}

так вот если у элемента

#topLine

убрать

margin-top:-14px;

, то он будет к основной высоте (которая у меня в сумме 100%) добавлять еще 14px и рисовать, соответственно, полосы прокрутки.

Edited December 3, 2011 by t.matik

axiles · December 9, 2011

короче ответ на свои вопросы нашол тут Моя ссылка

там всё по полочкам расписанно откудова чего и почему

Edited December 9, 2011 by axiles

Sign In

HIEGTH 100%

Question

axiles

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

ыра

Link to comment

Share on other sites

zSpx

Link to comment

Share on other sites

axiles

Link to comment

Share on other sites

sammasati

Link to comment

Share on other sites

axiles

Link to comment

Share on other sites

axiles

Link to comment

Share on other sites

zSpx

Link to comment

Share on other sites

t.matik

Link to comment

Share on other sites

axiles

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information