[Помогите] По верстке 3х колонного макета

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем alex_storm, 29 дек 2012.

  1. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    559
    Вопрос такой, есть структура.
    Код:
    <div id="main">
    	<div id="header">
    		<div class="header"></div>   
    		<a href="/" class="logo"></a>
    	</div>
    	<div id="content">
    		<div id="left">
    	   
    		</div>
    		<div id="center">
    		</div>
    		<div id="right">
    		</div>
    	</div>
    	<div class="clear"></div>
    	<div id="footer">
    		</div>
    </div>
    Я хочу чтобы нормально прижимался футер к низу сайта, но не получается..
    Вот стили.
    Код:
    #main{margin:0 auto 40px auto;width:1280px;}
    #content{padding:10px 60px;margin-top:20px;position:relative;}
    #left, #center, #right{position:absolute;}
    #content #left{width:255px;left:70px;}
    #content #center{width:640px;margin-left:290px;}
    #content #right{width:180px;right:70px;}
    .clear{clear:both;height:1px;overflow:hidden;}
    #footer{height:120px; position:relative;}
    Но при таких стилях, футер улетает вверх... Как можно это решить?
     
  2. belwh1sper

    belwh1sper

    Регистрация:
    16 дек 2012
    Сообщения:
    19
    Симпатии:
    15
    чтобы прижать футер книзу, можно чуть изменить структуру:
    HTML:
    <div id="main">
    	<div id="header">
    		<div class="header"></div>
    		<a href="/" class="logo"></a>
    	</div>
    	<div id="content">
    		<div id="left"></div>
    		<div id="center"></div>
    		<div id="right"></div>
    	</div>
    	<div class="clear"></div>
    </div>
    <div id="footer"></div>
    Код:
    #main {
    	  width: 1280px;
    	  margin: 0 auto;
    	  min-height: 100%;
    	  height: auto !important;
    	  height: 100%;
    }
    #footer {
    	  width: 1280px;
    	  margin: -120px auto 0;
    	  height: 120px;
    	  position: relative;
    }
    так рекомендует http://csstemplater.com/ :Smile:
     
    gogatar нравится это.
  3. gogatar

    gogatar

    Регистрация:
    8 янв 2013
    Сообщения:
    3
    Симпатии:
    1
    иногда CSS не может побороть проблемы с версткой и надо пользоваться скриптами. например:
    Код:
    <div id="main">
        <div id="header">
            <div class="header"></div>
            <a href="/" class="logo"></a>
        </div>
        <div id="content">
            <div id="left"></div>
            <div id="center"></div>
            <div id="right"></div>
        </div>
        <div class="clear"></div>
    </div>
    <div id="footer"></div>
    Код:
    // JavaScript Document
    <!--
            function getWindowHeight() {
                var windowHeight = 0;
                if (typeof(window.innerHeight) == 'number') {
                    windowHeight = window.innerHeight;
                }
                else {
                    if (document.documentElement && document.documentElement.clientHeight) {
                        windowHeight = document.documentElement.clientHeight;
                    }
                    else {
                        if (document.body && document.body.clientHeight) {
                            windowHeight = document.body.clientHeight;
                        }
                    }
                }
                return windowHeight;
            }
            function setFooter() {
                if (document.getElementById) {
                    var windowHeight = getWindowHeight();
                    if (windowHeight > 0) {
                        var digitalHeight = document.getElementById('main').offsetHeight;
                        var footerElement = document.getElementById('footer');
                        var footerHeight  = footerElement.offsetHeight;
                        if (windowHeight - (digitalHeight + footerHeight) >= 0) {
                            footerElement.style.position = 'relative';
                            footerElement.style.top = (windowHeight - (digitalHeight + footerHeight)) + 'px';
                        }
                        else {
                            footerElement.style.position = 'static';
                        }
                    }
                }
            }
            window.onload = function() {
                setFooter();
            }
            window.onresize = function() {
                setFooter();
            }
            //-->
     
    belwh1sper нравится это.
  4. ifish

    ifish

    Регистрация:
    10 янв 2013
    Сообщения:
    22
    Симпатии:
    2