Jump to content
  • 0

100% - 200px

AntonSolo

Asked by AntonSolo,

 Share

Question

AntonSolo Explorer

AntonSolo

Posted
Posted

Читал на форумах, но окончательного ответа так и не нашол.

Есть три блока

height:200px;

center:100%;

footer:200px;

как создать такой макет, чтобы при отсутствии в center контента правый скрол(вертикальный) отсутствовал, тоесть center = 100% - 400px. А верстка занимала весь экран в зависимостим от расширения. НЕ используя JS ?

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Минимальный (имхо) вариант:

<!doctype html>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; position: relative; background: #eee; }
html>body { height: auto; min-height: 100%; } /* все, кроме IE6 */
.header, .footer { height: 200px; width: 100%; position: absolute; }
.header { background: #fcc; top: 0; }
.footer{ background: #cfc; bottom: 0; }
.center { padding: 200px 0; }
</style>
<div class="header">Header</div>
<div class="center">Center</div>
<div class="footer">Footer</div>

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted (edited)

Одно из двух: или я неверно понял задачу из вашего описания, или у вас ошибка при воспроизведении (99%, что доктайп пропущен). Потому что в приведенном примере "не работать" буквально нечему :(.

Edited by SelenIT
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

AntonSolo, без понимания принципов всё некроссбраузерное, яваскрипт в первую очередь. Впрочем, не хотите разобраться со своей ошибкой - дело ваше. Просто вы с ней еше не раз столкнетесь, знаю по опыту... ;)

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
Go to question listing
×
×
  • 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

  I accept