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

    No registered users viewing this page.

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

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

    • Вернулся в свою созданную тему через 4,5 года. )) После создания темы около года верстал заказы на фрилансе. От обычной верстки до полноценных LP и небольших сайтов. Даже один раз из своей верстки шаблон Wordpress сделал.   Потом заинтересовался другими нишами и верстку забросил. Арбитражил, занимался СЕО, даже трейдил криптовалютой больше года. Но опять потянуло в вебразработку. Пытаюсь снова все вспомнить. Мешает только основная работа - мало времени остается на своё хобби.  В общем, кому сроки не жмут и кто не боится доверится джуниору, милости просим. Сверстаю, подправлю, помогу. В свободное от работы время. Бескорыстно. Просто хочется снова покодить и не просто так, а чтобы с пользой.  Почта : zdl79@mail.ru Skype : forest19791 Телеграмм : https://t.me/forestino
    • Могу попробовать. Опыт верстки 1 год. Но в связи с основной работой, не связанной с IT, мало на это времени. zdl79@mail.ru
    • Здравствуйте, кажется я делаю что-то не так, но вот что именно никак не пойму.
      Проблема в следующем: подключаю карусель и блок становится неактивен, хотя вроде бы все должно работать как нужно.
      Пробовал подключать карусель и через cdn и через скачанный архив - результат один и тот же.
      Открывал через google, firefox и opera-у - все так же никакого сдвига.
      Подключал по инструкции на официальном сайте.
      Пробовал использовать SlickSlider, но результат тот же.
  • Popular Contributors