Sign in to follow this  
Nailya

Проблема с внешним контейнером

Recommended Posts

Всем привет!

У меня такая проблема,попробую объяснить:при увеличении контента внутреннего контейнера,

внешний контейнер #container не увеличивается вместе с внутренним,

как только начинаешь прокручивать скролинг

pic.jpg

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="basecss.css" type="text/css">
<link rel="stylesheet" href="css_index1.css" type="text/css">
<!--[if IE 6]>
<link href="ie.css" type="text/css" rel="stylesheet">
<![endif]-->
</head>
<body>
<div id="container">
<div id="main">
<div id="header">

</div><!-- end header -->
<div id="all">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>end</div><!-- end all -->

</div><!-- end main -->
<div id="footer"></div>
</div><!-- end container -->
</body>
</html>

html,body{
height:100%;
background:#fff;
color:#000;
}
body{
font-size:small;
font-family:Helvetica, Arial, sans-serif;
}
#container{
width:800px;
background:#ccf;
margin:0 auto;
height:100%;
}

#main{
width:600px;
min-height:100%;
background:#fff;
margin:0 auto -90px;
}
#all{
padding:0 0 90px;
overflow:hidden;
}
#footer{
width:600px;
margin:auto;
height:90px;
background:#369;
}
#header{
width:600px;
margin:auto;
height:120px;
border-bottom:1px solid #ccc;
background:#369;
}

Share this post


Link to post
Share on other sites

Поменяйте в #container {} height:100%; на min-height:100%;

Я пробовала так сделать, но тогда появляется другая проблема: footer не прибит к низу, если уменьшить контент

Share this post


Link to post
Share on other sites

Есть один способ, но в нем присутствует один минус — margin:0 auto не станет выравнивать footer по центру. У вас фиксированный макет, может и footer можно зафиксировать, а отступ сделать не автоматический, а вручную прописать?

В общем нужно:

Поменять в #container {} height:100%; на min-height:100%;

Поменять в #main {} margin:0 auto -90px; на margin:0 auto;

Добавить в #footer {} position:absolute; bottom:0;

Добавить в #container {} position:relative;

Share this post


Link to post
Share on other sites

Есть один способ, но в нем присутствует один минус — margin:0 auto не станет выравнивать footer по центру. У вас фиксированный макет, может и footer можно зафиксировать, а отступ сделать не автоматический, а вручную прописать?

В общем нужно:

Поменять в #container {} height:100%; на min-height:100%;

Поменять в #main {} margin:0 auto -90px; на margin:0 auto;

Добавить в #footer {} position:absolute; bottom:0;

Добавить в #container {} position:relative;

Спасибо, все так и сделала, footer прибит к низу, но теперь #main отлип от #footer, при малом контенте

Share this post


Link to post
Share on other sites

А у вас итоге все так и будет однотонными цветами, никаких градиентов и прочего?

Если да, то было бы удобно сделать изображением и повешать его на #container

Share this post


Link to post
Share on other sites

Я пока для себя учусь делать сайт, не знаю еще будет ли там изображение, а вот с высотой постоянный косяк,

Я пробовала вставить фон-изображение background:url() repeat-y; в #main, но он у меня не растягивается по высоте,не знаю, что делать

Share this post


Link to post
Share on other sites

Можно сделать изображение, в центре которого будет белый цвет, а по краям синий и повешать на #container. Будет илюзия, что центр растянут до низу, а на самом деле, он зависит от количества содержимого.

Share this post


Link to post
Share on other sites

Можно сделать изображение, в центре которого будет белый цвет, а по краям синий и повешать на #container. Будет илюзия, что центр растянут до низу, а на самом деле, он зависит от количества содержимого.

Все получилась)))))

Вы ответили на все мои вопросы, спасибо огромное:) :)

Можно сделать изображение, в центре которого будет белый цвет, а по краям синий и повешать на #container. Будет илюзия, что центр растянут до низу, а на самом деле, он зависит от количества содержимого.

Все получилась)))))

Вы ответили на все мои вопросы, спасибо огромное:) :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Member Statistics

    46,434
    Total Members
    3,128
    Most Online
    Sterben
    Newest Member
    Sterben
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Если свойства нет в спецификации, то откуда его возьмет браузер? Даже если в каком то одном из браузеров введут это свойство то смысла его использовать все-равно не будет, так как в остальных оно работать не будет 🙂   Тогда бардак творился, DHTML, разные объектные модели и все дела. У netscape действительно была такая фича. Хотя не факт что она работала. Вот тут https://www.uv.es/jordi/v3/html/dynhtml/dynamic.pdf можно увидеть что float:center; присутствует в коде, но следом написано что элементы можно выровнять с помощью float слева или справа, или с помощью js по центру. Также в книге указаны допустимые значения для float - left, right, none. Так что это скорее всего была запланированная возможность, которая не получила реализации.
    • Если бы с html и css, все браузеры строго соответствовали спецификациям) Да статье около десятка лет, а то и более. Вот я тоже склоняюсь к тому, что это ошибка. но эта лекция была написана даже с учётом ещё живого на тот момент netscape navigator. Может быть он позволял интерпретировать такую конструкцию. В описании автор указывает, что так блок становится обтекаемым с двух сторон.
    • Может с clear путаете? Или в статье спутали. Наверно, древняя?
      http://htmlbook.ru/css/clear
  • Popular Contributors