个人中心
gpt4 book ai didi

html - 如何使这些 div 集具有响应性？

转载 作者：行者123 更新时间：2023-11-28 02:53:22 25 4
gpt4 key购买 nike

似乎无论我做什么我都无法让这组特定的 div 填充视口(viewport)。我已经尝试使用负值来插入......但要么超过屏幕。我的意图是保持阴影..并且仍然填满屏幕。应该只有一个滚动条，那就是 #divBody 里面的那个

我已经能够创建粘性页脚，但我使用 push div 丢失了页眉。

我非常喜欢这种页眉/正文/页脚布局。希望有人能帮我解决这个问题。

 #mainContainer {
    height: 100%;
    margin: 2%;
    border: 1px solid white;
    background-color: white;
    box-shadow: 0 2px 7px #292929;
    -moz-box-shadow: 0 2px 7px #292929;
    -webkit-box-shadow: 0 2px 7px #292929;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
    #divBody {
        margin-top: 0;
        min-height: 150px;
        max-height: 500px;
        overflow: auto;
    }
    
    #divBody,
    #divHeader,
    #divFooter {
        padding: 1px;
    }
    
    #divHeader {
        height: 40px;
        border-bottom: 1px solid #EEE;
        background-color: #fff;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-topright: 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        font-size: 16px;
        font-family: sans-serif;
        overflow: hidden;
    }
    #divFooter {
    font-size: 17px;
    height: 40px;
    background-color: white;
    border-top: 1px solid #DDD;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px
}
<html>

<head>
    <title></title>
    <link rel="stylesheet" href="temp.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <div id="mainContainer">
        <div id="divHeader">
            header
        </div>
        <div id="divBody" class="simplebar">
         body<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
        </div>
        <div id="divFooter">
            footer
        </div>
    </div>
</body>


</html>

最佳答案

如果我理解正确，您希望页眉和页脚始终可见并且 divBody 占据浏览器高度的剩余空间(因此唯一的滚动条在 divBody 上)。

这是一个工作示例。有几个 calc 可以补偿边框宽度。

html {
  height: 100%;
  margin:0;
}

body {
  height: 96vh;
  margin: 0;
  padding: 2vh;
}

#mainContainer {
    height: calc(100% - 4px);
    border: 1px solid white;
    background-color: white;
    box-shadow: 0 2px 7px #292929;
    -moz-box-shadow: 0 2px 7px #292929;
    -webkit-box-shadow: 0 2px 7px #292929;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
#divBody {
    margin-top: 0;
    height: calc(100% - 90px);
    overflow: auto;
}

#divBody,
#divHeader,
#divFooter {
    padding: 1px;
}

#divHeader {
    height: 40px;
    border-bottom: 1px solid #EEE;
    background-color: #fff;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 16px;
    font-family: sans-serif;
    overflow: hidden;
}
#divFooter {
    font-size: 17px;
    height: 40px;
    background-color: white;
    border-top: 1px solid #DDD;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px
}
<html>

<head>
    <title></title>
    <link rel="stylesheet" href="temp.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <div id="mainContainer">
        <div id="divHeader">
            header
        </div>
        <div id="divBody" class="simplebar">
         body<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
        </div>
        <div id="divFooter">
            footer
        </div>
    </div>
</body>


</html>

关于html - 如何使这些 div 集具有响应性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46566317/

25 4 0
文章推荐： javascript - 如何将数据附加到不同的div
文章推荐： javascript - 当我改变容器
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com