How to put a fuse down the page



  • I understand it's not the best option, because I had to do this in the first place, it's the client's demand, the code adds how to put a futer down in this case.

    *{
     margin:0;
     padding:0;
    }
    html,body{
     height:100%;
    }
    .clear{
     display:block;
     clear:both;
    }
    .clear:after{
     content:'';
     display:block;
     clear:both;
    }
    .main{
     position:relative !important;
     /*height:100%;
     min-height:100%;*/
     background:green;
     /*overflow:hidden;
     overflow-y:auto;*/
    }
    .left{
     position:absolute;
     left:0; top:0;
     width:25%;
     min-height:300px;
     background:;
     z-index:98;
    }
    .center{
     position:absolute;
     left:25%; 
     top:0;
     right:0;
     width:50%;
     min-height:300px;
     background:;
     z-index:100;
     border-left:1px solid transparent;
     border-right:1px solid transparent;
    }
    .post{
     width:90%;
     margin:5px auto;
     min-height:200px;
     background:#fafafa;
     padding-top:20px;
     padding-bottom:30px;
    }
    .post img{
     float:left;
     margin-left:4px;
     margin-top:4px;
     margin-right:10px;
     margin-bottom:4px;
     display:block;
     width:250px;
     height:150px;
    

    }
    .block{
    width:90%;
    margin:5px auto;
    min-height:200px;
    background:#fafafa;
    }
    .widget{
    width:100%;
    min-height:330px;
    background:lightblue;
    }
    .widget img{
    display:block;
    width:100%;
    height:auto;

    }
    .block h2{
    padding-left:10px;
    }
    .block li{
    display:block;
    width:90%;
    margin:4px auto;
    height:27px;
    line-height:27px;
    padding-left:20px;
    position:relative;
    }
    .block li:hover:after{
    position:absolute;
    bottom:-3px; left:0;
    content:'';
    width:block;
    width:80%;
    height:5px;
    background:-webkit-linear-gradient(#fafaaf,#434343,#fefefe);
    }
    .block a{
    text-decoration:none;
    font-size:16px;
    }
    .block form{
    text-transform:upercase;
    }
    .block input{
    display:block;
    width:90%;
    height:30px;
    line-height:30px;
    margin:3px auto;
    font-size:12px;
    }
    .block input[type=submit]{
    display:block;
    width:150px;
    height:20px;
    line-height:30px;
    margin:5px 13px;
    }
    .center p{
    width:90%;
    margin:20px auto;
    text-align:justify;
    }
    .right{
    position:absolute;
    left:75%; top:0;
    width:25%;
    min-height:300px;
    background:;
    z-index:97;
    }
    .header{
    min-height:200px;
    }
    .footer{
    height:200px;
    background:#c01;
    margin-top:30px;
    z-index:200;
    }

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="main.css" />
    </head>
    <body>
    <div class="header"></div>
    <div class="main clear">
    <div class="center">
    <div class="post">
    <p><img src="" alt="" />
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem suscipit veniam, iure sit quis rerum ullam dolorum reiciendis necessitatibus, odio repellat mollitia, iste nesciunt. Laborum distinctio molestiae vitae facilis neque, quas placeat impedit totam in officia eaque, beatae quod! Officiis perspiciatis provident tempore dolor odio nulla cumque laudantium suscipit quaerat non! Repudiandae sint natus nulla. Aspernatur sint fuga, molestias repellat error perferendis, ea minus atque quo natus eum voluptate, maiores mollitia iusto nisi illum aliquam porro minima, quae ullam tempora! Dolorum distinctio perspiciatis facilis nesciunt ad similique dolorem, sapiente aspernatur quaerat modi animi provident, earum eligendi perferendis cumque facere magni eius temporibus nihil optio. Ab quae tempora ea reiciendis, optio itaque inventore voluptas quo consectetur, maiores veniam velit adipisci maxime perspiciatis numquam vitae minima iusto soluta! At, consequatur, voluptates. Error molestiae magnam dicta dolore soluta rerum optio delectus fugit nihil.
    </p>
    </div>

    <div class="post">
    <p><img src="" alt="" />
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem suscipit veniam, iure sit quis rerum ullam dolorum reiciendis necessitatibus, odio repellat mollitia, iste nesciunt. Laborum distinctio molestiae vitae facilis neque, quas placeat impedit totam in officia eaque, beatae quod! Officiis perspiciatis provident tempore dolor odio nulla cumque laudantium suscipit quaerat non! Repudiandae sint natus nulla. Aspernatur sint fuga, molestias repellat error perferendis, ea minus atque quo natus eum voluptate, maiores mollitia iusto nisi illum aliquam porro minima, quae ullam tempora! Dolorum distinctio perspiciatis facilis nesciunt ad similique dolorem, sapiente aspernatur quaerat modi animi provident, earum eligendi perferendis cumque facere magni eius temporibus nihil optio. Ab quae tempora ea reiciendis, optio itaque inventore voluptas quo consectetur, maiores veniam velit adipisci maxime perspiciatis numquam vitae minima iusto soluta! At, consequatur, voluptates. Error molestiae magnam dicta dolore soluta rerum optio delectus fugit nihil.
    </p>
    </div>
    </div>
    <div class="left">
    <div class="block">
    <!--Левый блок код поместить сюда-->

    </div>
    </div>
    <div class="right">
    <div class="block">
    <h2>Категории</h2>
    <ul>
    <li><a href="#">Арт примеры</a></li>
    <li><a href="#">Эротика</a></li>
    <li><a href="#">Статьи</a></li>
    <li><a href="#">PhotoShop</a></li>
    <li><a href="#">Css</a></li>
    <li><a href="#">Php</a></li>
    <li><a href="#">Продвинутый css</a></li>
    <li><a href="#">Примеры</a></li>
    <li><a href="#">Зарисовки</a></li>
    </ul>
    </div>
    <div class="block">
    <!--Правый блок код поместить сюда-->
    <div class="widget">
    <img src="widget.jpg" alt="" />
    </div>
    </div>
    <div class="block">
    <form action="" name="" method="">
    ФОРМА АВТОРИЗАЦИИ
    <input type="text" name="" placeholder="ИМЯ ПОЛЬЗОВАТЕЛЯ"/>
    <input type="email" name="" placeholder="ЕMAIL ПОЛЬЗОВАТЕЛЯ"/>
    <input type="" name="" placeholder="ЛОГИН ПОЛЬЗОВАТЛЯ"/>
    <input type="submit" name="" value="ВОЙТИ"/>
    </form>
    </div>
    </div>
    </div>
    <div class="footer"> </div>
    </body>
    </html>

    Futher div.footer painted red, it's after div.main♪ In the block div.main Three containers that are completely dispossessed inside the block div.mainand that's why it's such a mess. Help me put the futer down the page.



  • Here are the necessary changes:

    html, body {
        min-height: 100%;
        position: relative;
    }
    .main {
        /* ... */
        padding-bottom: 230px;
        /* 230 - это 200 высота футера + 30 верхний отступ (который из футера я убрал) */
    }
    .center {
        /* position:absolute; */
        /* центруйте этот блок как-то иначе. Вариантов
           немало, например в вашем случае может быть достаточно
           margin-left: 25%; */
    }
    .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        /* margin-top:30px; - это не понадобится*/
        height: 200px;
    }
    

    Principal problem position:absolute; Ooh. div.center♪ Because of her. div.main has a zero height and you won't do anything with a futher because the height div.center changing.

    This option is pressed to the bottom of the page, irrespective of the height of the content (i.e. if the content is small, the foet is still down). Only the main background is to be removed. .main Total body and make a background .header




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2