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

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

转载作者：行者123 更新时间：2023-11-28 02:53:22

似乎无论我做什么我都无法让这组特定的 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/

文章推荐： javascript - 如何将数据附加到不同的div

文章推荐： javascript - 当我改变容器

的宽度时，里面的

也应该相应地改变

文章推荐： javascript - PHP 用希伯来语创建文件名

文章推荐： javascript - rails : best way to test an action called remotely?

macos - react 性 cocoa 中的管道转发运算符(operator)在行动中失踪，是的，我已经导入了 react 性 cocoa
我在 Mac OsX 10.11 上使用 Xcode 7.0.1 (7A1001) 我使用 carthage 0.9.2 通过以下购物车文件下载reactivecocoa github“Reactiv
laravel - 如何避免vue中的 react 性
我正在将一个对象从属性“模型”(我从 Laravel 中的 Blade 属性模型中获得)分配给数据属性模型。后来数据属性模型发生变化，因为它绑定(bind)到表单输入字段。但 Prop “模型”也发生
javascript - 数组内对象的属性更改的 react 性
当我更新数组内对象的属性然后作为组件的 Prop 传递时，在 svelte 中触发 react 性的正确方法是什么？ let items = [{ id: 1, name: 'first'
dry - 是否有自动工具来查找代码库的 DRY 性？
我是 DRY principle 的坚定拥护者: Every piece of knowledge must have a single, unambiguous, authoritative rep
multithreading - 如何保持线程的消息泵 react 性
我正在实现一个需要以下功能的线程: 及时响应终止请求推送消息在等待消息时保持对 SendMessage 请求的响应我对消息泵的初始实现使用了 GetMessage，如下所示: while not
meteor - 暂停实时数据或游标的 react 性
在我的应用程序中，用户获得了一份已到达她的文档列表，并且可以对每个文档执行操作。文件是分批提交的，当这种情况发生时，列表会增加。这一切都很好，这是预期的行为，但最好有一个按钮“暂停实时数据”，它会忽
javascript - 简单的重构会消除 react 性
我有一个属性为的数据对象 displaySubtotal 我可以通过以下方式更新该属性的值: data.displaySubtotal = numPad.valueAsAString(); 我的方法
javascript - 自定义小部件的 react 性
我需要一个垂直 slider 输入。由于内置的 sliderInput 函数无法做到这一点，因此我选择自己实现。根据this thread可以 (I) 使用 CSS 旋转 sliderInput
javascript - 我应该如何保持我的出版物的 react 性？
我正在从自定义用户权限管理系统迁移到 Alanning:roles v2.0 .我有一个非常基本的结构: 基本用户用户组，每个用户组都有特定的设置。我将它们存储在一个“组”集合中。管理群组的用户的
r - 条件 react 性 Shiny
Shiny 中的响应式(Reactive)表达式将更改传播到需要去的地方。我们可以使用 isolate 来抑制一些这种行为。，但是我们可以抑制基于我们自己的逻辑表达式传播的更改吗？我给出的例子是一
Haskell:FRP react 性 Parsec？
是否有(或可能有) react 性 Parsec (或任何其他纯函数式解析器)在 Haskell 中？简而言之，我想逐个字符地为解析器提供数据，并获得与我提供的足够多的结果一样多的结果。或者更简单
javascript - 将输入字符串与文本/元素匹配并突出显示 react 性
HTML(JADE) p#result Lorem ipsum is javascript j s lo 1 2 4 this meteor thismeteor. meteor input.sear
javascript - svelte 如何处理导入内部的 react 性
我有一个被导入函数更改的对象。 https://svelte.dev/repl/e934087af1dc4a25a1ee52cf3fd3bbea?version=3.12.1 我想知道如何使我的更改反
image - 如何在YUV 420半平面图像中应用单应性/ react 性？
我有一个YUV 420半平面格式的图像，其中字节以这种方式存储: [Y1 Y2 ... [U1 V1.... Yk Yk+1...] Uk' Uk'+1] 其中Y平面的大小是UV平面的两倍，并
objective-c - react 性 NSMutableDictionary？
如何使用 ReactiveCocoa 订阅从 NSMutableDictionary 添加和删除的对象？另外，我想在它发生变化时广播通知。我的猜测是可以使用 RACMulticastConnectio
r - Shiny:允许用户选择 react 性
我正在构建一个带有多个选项卡的应用程序，其中一些选项卡涉及过多的计算，而另一些选项卡的计算速度很快。一个允许用户在 react 性或手动更新之间进行选择的复选框，与“刷新”按钮结合使用，将是理想的选择
meteor - 关闭内容可编辑区域的 react 性 (Meteor)
我知道您可以在获取集合时使用 reactive: false 关闭 react 性。如何在内容可编辑区域内的集合字段中实现相同的效果？示例: Template.documentPage.events(
z3 - z3 的解决方法不支持注入(inject)性
我想在 z3 中表示一个哈希函数，比如 SHA(x)。在做了一些研究之后，似乎 z3 不能很好地支持注入(inject)性，所以我不能有像这样的约束(虽然我意识到这并不是严格意义上的碰撞，但作为一种启
javascript - Meteor 中的模板级 react 性
我正在解决一个问题，我想在仪表板中将数据显示为图表(通过 perak:c3 )和表格(通过 aslagle:reactive-table )。我的问题是数据是从 MongoDB 中的集合中提取的，它的
swift - react 性 cocoa 信号不起作用
我的 ViewModel 中有这个函数，它返回一个信号，但内部 block 不起作用，我尝试添加断点，但它没有中断。这是我的代码。 func executeLoginAPI() -> RACSigna

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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