css实现简单左右布局

实现左右布局:左边宽度固定的导航栏,右边自适应宽度,左边导航栏高度永远和右边内容高度保持一致,底部永远致于最下面,不会随内容的变化而改变,测试浏览器中,谷歌浏览器html下面会有留白,其他浏览器正常。注:本人觉得方法比较方便,容易上手

<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="content-type" content="text/html,charset=UTF-8">
    <title>页面布局练习</title>
    <style>
        *{margin: 0;padding: 0}
        html,body{height: 100%}
        #left{
            width: 270px;
            border: 1px solid #000000;
            float: left;

        }
        #right{
            margin-left:300px;
            height: auto;
        }
        .footer,.header{background-color: #ffc0cb;text-align: center;font-size: 16px;height: 50px;width: 100%;line-height: 50px}
        .footer{position:absolute;bottom:0;left: 0}
        ul{list-style: none}
        ul li{margin-left: 40px;padding-top: 5px}

    </style>
</head>
<body>
    <div style="position:relative;width:100%;min-height: 100%">
        <div class="header">标题栏</div>
        <div style="padding-bottom: 115px;margin-top: 40px;">
            <div id="left">
                <ul>
                    <li>html</li>
                    <li>css</li>
                    <li>css3</li>
                    <li>javascript</li>
                    <li>Dom</li>
                    <li>Bom</li>
                    <li>jquery</li>
                    <li>ajax</li>
                    <li>node</li>
                    <li>angular</li>
                </ul>
            </div>
            <div id="right">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque cupiditate error illum maxime molestias quasi ratione veritatis. Assumenda autem dolore, doloribus explicabo ipsam odit qui sequi veniam voluptas voluptatibus!</p>
            </div>
            <div style="clear: both;"></div>
        </div>
        <div class="footer">
            footer部分
        </div>
    </div>
    <script type="text/javascript">
        window.onload=window.onresize=function(){
            var leftDiv=document.getElementById("left");
            var rightDiv=document.getElementById("right");
            if(leftDiv.clientHeight < rightDiv.clientHeight){
                leftDiv.style.height = rightDiv.clientHeight+'px';
            }else{
                rightDiv.style.height = leftDiv.clientHeight+'px';
            }
        }
    </script>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » css实现简单左右布局

赞 (2)
分享到:更多 ()

发表评论 0