JS和CSS网页布局与导航栏设计(精)

中间容器的高度,通过JS代码,实现自适应.
最终做出来的效果如下:

html代码部分:

    
    
    
    
    
    


    

        

            
top-navigate

            

                

                    
 标题一 
                    
 标题二 
                    
 标题三 
                    
 标题四 
                    
 标题五 
                
            
        

        
left

        
contents

        
right

        
footer
    

CSS代码部分:

*{
    margin: 0;
    padding: 0;
}
/* .container{
    width: 100%;
} */

.top-navigate{
    width: 100%;
    height: 30px;
    background-color: rgb(209, 209, 209);
}

.navigate{
    width: 100%;
    background-color: rgb(155, 141, 141);
}

.left{
    width: 15%;
    height: auto;     /* 800px*/
    background-color: #f0e8e8;
    float: left;
}

.contents{
    width: 70%;
    height: auto;
    background-color: #f3ebea;
    float: left;
}

.right{
    width: 15%;
    height: auto;
    background-color: #f0e8e8;
    float: right;
}

.footer{
    width: 100%;
    height: 60px;
    background-color: rgb(85, 81, 81);
    float: left;
}

/* 以上是网页的布局CSS,以下是横向导航页的代码 */

.navigate {                     /* 这里为了看了直观,多写了navigate,可以跟上面的样式并在一起.*/
    height:50px; 	            /* 导航栏的高度  */
    text-align:center;		    /* 文字居中 */
}

.navigate ul li{
    list-style-type:none;       /* ul前面的点  */
    display: inline;
}

.navigate ul li a {
    line-height:50px; 		    /* 选中的文字块的行高,选择跟导航栏高度一致即可  */
    text-decoration: none;      /* 去掉连接下划线  */
    font-size:20px;			    /* 字体大小 */
    color: #FFFFFF;			    /* 字体颜色 */
    padding: 14px 30px;
}

.navigate ul li a:hover {
    background-color: #d8d8d8;	/* 选中的文字块的颜色 */
}

JS代码部分:

window.onload = function(){
    /*
        打开网址对应导航栏页面时，该导航栏a标签背景颜色改变。
    */
    var navigate = document.getElementById("navigate");
    var getAllA = navigate.getElementsByTagName("a");

    for (var i = 0; i < getAllA.length; i++) {
        //获得所有A标签的超链接地址：
        var getUrl = getAllA[i].href;
        //把超链接地址，做成正则表达式
        var pattern = new RegExp(getUrl);
        //检查超链接地址，是否匹配地址栏的地址。
        var result = pattern.test(location.href);
        //如果匹配，则设置style的背景颜色，并且退出循环。
        if (result) {
            getAllA[i].style.backgroundColor = "#d89e96";
            break;
        }
    }


    /*
        实现 left right  contents 高度自适应值
     */
    var leftHeight = document.getElementById('left');
    var rightHeight = document.getElementById('right');
    var contentsHeight = document.getElementById('contents');

    //获取头部和尾部元素
    var topHeight = document.getElementById('top');
    var footerHeight = document.getElementById('footer');

    //获取这三个元素中的最大高度
    var maxHeight = Math.max(leftHeight.offsetHeight, contentsHeight.offsetHeight, rightHeight.offsetHeight);

    //window.innerHeight是窗口内的高度,减去头部和尾部元素的高度,等于中间容器需要的高度
    var screenLeft = window.innerHeight - topHeight.offsetHeight - footerHeight.offsetHeight;

    //如果中间的最大容器高度,小于剩余窗口的高度,则让中间容器高度,去相加剩余窗口的高度.
    // 从而保证所有元素的高度之和,正好和窗口内的高度一直.
    if (maxHeight < screenLeft) {
        leftHeight.style.height = screenLeft + "px";
        rightHeight.style.height = screenLeft + "px";
        contentsHeight.style.height = screenLeft + "px";
        //如果中间的最大容器高度,大于剩余窗口的高度,则让中间的left right content高度,去相加最大的高度值.
    } else {
        leftHeight.style.height = maxHeight + 'px';
        rightHeight.style.height = maxHeight + 'px';
        contentsHeight.style.height = maxHeight + 'px';
    }
}