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,559
    Total Members
    3,128
    Most Online
    Stilons
    Newest Member
    Stilons
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

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

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

    • есть внешний  блок с  фоновой  картинкой  на весь блок а внутри него  блок с контентом  2 вопроса  как переместить этот блок с контентом  так как мне нужно - почему- то все смещается вместе с фоном и еще как сделать так чтобы остальная часть листвы бамбука была видна сайт http://frontend-er.h1n.ru/asia-spa/
    • Добрый вечер! Помогите пожалуйста понять почему  при использовании сетки у меня вторая колонка не отображается пока ей не поставишь ширину 100%?  Разве она не должна подстраиваться под размер автоматом? вот мой код https://jsfiddle.net/gzf1hkc0/  в нем navbar с двумя колонками. проблема со второй колонкой. пс. в коде уже стоит ширина второй колонки 100%, но как я понимаю самому прописывать ее не надо и раз так может я что то не так сделал? заранее спасибо за то что уделили внимание моему вопросу)   
    • А как должен выглядеть не типовой сайт? Можете пример показать?
  • Popular Contributors