Jump to content
  • 0

Проблема с расположением блоков


Lithium
 Share

Question

Добрый день. Столкнулся со следующей проблемой. Не меняя рассположение блоков в коде, "прибить" футер к низу, при том что у блоков динамическая высота и на некоторых страница блока 4 может не быть.

Есть следующий код:


<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<p></p>
<![endif]-->
<div id="container">
<header>
<strong>0</strong> хеадер
</header>
<div id="content">
<div class="maintext"><strong>4</strong> Текст описательный (динамическая высота)</div>
<div class="firstcoll"><strong>1</strong> Колонка 1 (динамическая высота)</div>
<div class="secondcoll"><strong>2</strong> Колонка 2 (динамическая высота)</div>
<div style="clear:both;"><strong>3</strong> Блок 3 (динамическая высота)</div>
</div>
<aside>
<strong>5</strong> Lorem ipsum (динамическая высота)
</aside>
</div>
<footer><strong>6</strong> Футер</footer>
</body>

Стили:


header {
height: 54px;
}
#container {
max-width: 1200px;
min-width: 1000px;
margin: 0 auto;
}
#content {
width: 890px;
position: relative;
float: left;
}
.firstcoll {
width: 430px;
float: left;
}
.secondcoll {
width: 425px;
float: right;
}
.maintext {
width: 890px;
position: absolute;
top: 100%;
}
aside {
float: right;
width: 250px;
}
footer {
clear: both;
}

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

Так вам же Sensei уже ответил, по сути остается только заполнить контентом и все. Вот почитайте прижатие футера

Спасибо за ответ, НО он совершенно не решает суть проблемы. Вы даже не поняли её. Рассмотрите внимательнее код блок maintext уже имеет абсолютное позиционирование, проблема прижать футер уже с имеющими блоками не меняя расположения их в коде, при этом сохранив дизайн. Ещё раз проблема не просто прижать футер, а прижать его с уже имеющим расположением блоков при том что высота их динамическая. Не отвечайте больше элементарные решения, тут проблема глубже, поэтому и ищу здесь ответ, так как возможно тут есть специ или кто сталкивался с этим. Спасибо.

Вот сами исходники, может быть так будет проще понять суть.

Прямая ссылка: http://box.iptel.by/f/69737_169.rar

69736_c9e.jpg

Edited by Lithium
Link to comment
Share on other sites

  • 0

Честно говоря вижу только 2 решения:

1) Очевидное - перенести 4 блок вниз по коду

2) Высчитывать его высоту скриптом (если текст изменяется) и добавлять нижний паддинг к контейнеру. При этом не забыть очистить поток.

Link to comment
Share on other sites

  • 0

как-то так http://jsfiddle.net/sensei/z4sZf/

с прижатым футером http://jsfiddle.net/sensei/z4sZf/1/

Да этот вариат вроде как подходит, спасибо, а что делать если js будет выключен?

С js сразу было ясно что можно реализовать, хотелось бы только css если это возможно.

Edited by Lithium
Link to comment
Share on other sites

  • 0

Честно говоря вижу только 2 решения:

1) Очевидное - перенести 4 блок вниз по коду

2) Высчитывать его высоту скриптом (если текст изменяется) и добавлять нижний паддинг к контейнеру. При этом не забыть очистить поток.

Перенести это само собой, это вариант на крайний случай если ничего не выйдет.

Скрипт да он решит проблему, но хотелось бы без него

Очевидное - перенести 4 блок вниз по коду

Вот именно что хотелось бы не переносить, но если выхода другого нету то придётся

Ещё конечно вариант <footer></footer> перенести внутарь 4 блока, но я не в курсе что будет с семантикой кода html5 будет ли она нарушена таким образом.

Edited by Lithium
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By мурамаса
      Добрый день, при вертске столкнулся с такой проблемой, на первом скриншоте я старался с позиционировать элементы, что бы текст шел как бы лесенкой а между ними фото.
      http://joxi.ru/D2Pz9gOTp65Z7r
      Но после того как я добавляю вторую картинку элемент с текстом почему то присасывается к верхней части, хотя до этого я задал ему clear: left; что бы он расположился под первой картинкой.
      После добавления картинки, получается вот так http://joxi.ru/nAyvGpPtYbzRdr
      Помогите решить проблему, правильно ли вообще я позиционирую элементы на странице? или же можно решить туже задачу проще?
      Html этой секции
      <div class="box"> <div class="company"> <p>Наша компания на протяжении многих лет занимается производством крема из экологически чистых материалов. Мы предосталвяем широкий ассортимент кремов для разных целей. Именно нас на протяжении многих лет выбирают покупатели, потому что хотят получать результат, а не просто выкидывать деньги на ветер.</p> </div> <div class="company"> <p>В наших кремах испольщуются только природные и экогологически чистые материалы, включая фрукты вроде кокоса или сладких личи. Использование подобных материалов помогает поддерживать кожу в здоровом виде и не допускать ее высыхания, в том числе это благоприятно сказывается на лечении разных кожаных болезней и дерматологии.</p> </div> <img src="/images/crem.png" alt="Крем фото" class="photo"> <div class="company"> Эмульсионные кремы бывают двух типов – масло-вода и вода-масло. В первом случае эмульсия имеет жидкую консистенцию и используется для изготовления дневных увлажняющих кремов. Благодаря высокому содержанию воды (до 70 процентов) они восполняют потерю влаги, легко наносятся, быстро впитываются, не оставляя жирного блеска на коже. </div> <img src="/images/crem1.png" alt="эмульсия" class="photo"> </div> </section> css этой секции
      .company { width: 450px; text-align: justify; float: left; font-size: 20px; } .company:nth-child(2) { width: 450px; text-align: justify; float: right; margin-top: 250px; } .company:last-child { float:left; width: 450px; clear: left; } .photo { float: left; width: 400px; height: 400px; } .photo:last-child { float: right; }  
    • By Super_Saimon
      Добрый день! Подскажите каким способом правильней будет отцентрировать изображение(лого сайта) в header - e. Более конкретнее меня интересуют: центрировать сам блок-родитель с изображением, или само изображение? И если само изображение - пользоваться свойствами position и margin? Flex не предлагать. Хочу без него разобраться. В нем все просто на этот счет.
    • By ErUnDAK
      <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>How you use your text?</title> <style> a { text-decoration: none; } .lol { background: green; width: 50%; height: 145px; text-align: center; } .lol p { color: #109be6; margin: 0; padding: 0; text-align: center; font-size: 50px; border-top: 10px solid #78d3fa; border-bottom: 10px solid #78d3fa; text-shadow: 0 2px 4px #a0a0a0; } .menu ul { list-style: none; float: right; font-size: 0; padding-right: 12px; } .menu ul li { display: inline-block; font-size: 25px; } .menu ul li a { height: 100%; display: block; padding: 19px; background: #5faaea; color: #fff; box-shadow: inset -0px -12px 30px -10px black; border-left: 1px solid white; } .menu ul li a:hover { box-shadow: inset -0 1px 10px 0 black; } </style> </head> <body> <center> <div class="lol"> <p>How you use your text?</p> <div class="menu"> <ul> <li><a href="">Главная</a></li> <li><a href="">Купля/продажа</a></li> <li><a href="">Аренда</a></li> <li><a href="">Оставить заявку</a></li> <li><a href="">КОНТАКТЫ</a></li> </ul> </div> </div> </center> </body> </html> Здравствуйте! У меня возникла проблема, что при уменьшении окна браузера всё смещается и становится кривым. Как отменить это смещение, чтобы всё оставалось как при полном экране?
    • By Voilin
      Здравствуйте! Имеется картинка для заднего фона и ещё 2 файла, которые надо разместить поверх самого фона
      Хотелось бы узнать как можно разместить ipad и iphone на фоне, уменьшить их размер (сами они очень большиеа) и сделать растягивающийся фон

      Могу также оставить ссылку на psd если надо.
      Заранее благодарю
    • By Dillett
      Здравствуйте, прошу помощи как начинающий и неопытный верстальщик.
      Проблема заключается в том, что я не могу спозиционировать элементы, как того требует дизайн макета. 
      Подскажите как можно добиться необходимого результата, как на изображении.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy