JS和CSS网页布局与导航栏设计(精)_background-color: rgb(209, 209, 209);-CSDN博客

本文链接：https://blog.csdn.net/linqunbin/article/details/93037842

中间容器的高度,通过JS代码,实现自适应.
最终做出来的效果如下:
在这里插入图片描述
html代码部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="testcss.css">
    <script src="testjs.js"></script>
</head>
<body>
    <div class="container">
        <div id="top" class="top">
            <div class="top-navigate">top-navigate</div>

            <div id="navigate" class="navigate">
                <ul id="navigateUl">
                    <li> <a href="">标题一</a> </li>
                    <li> <a href="">标题二</a> </li>
                    <li> <a href="">标题三</a> </li>
                    <li> <a href="">标题四</a> </li>
                    <li> <a href="">标题五</a> </li>
                </ul>
            </div>
        </div>

        <div id="left" class="left">left</div>

        <div id="contents" class="contents">contents</div>

        <div id="right" class="right">right</div>

        <div id="footer" class="footer">footer</div>
    </div>
</body>
</html>

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';
    }
}