个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
27
4
https://jsfiddle.net/u74vyv7w/
请引用上面链接中的代码片段。我正在尝试实现固定标题、固定左侧导航支架、固定右侧内容支架和可滚动中间内容支架(滚动条出现在浏览器窗口上，而不是出现在 div 元素上)。我面临两个问题:
div.middle {-webkit-calc(100% - 300px);}
为什么中间的content holder左右两边有8px的空隙？即使在计算宽度后，它也不会改变(引用上面的代码)。
当内容增长并超过屏幕大小时，为什么中间内容容器的背景颜色没有填满整个空间？
Stack Overflow 不允许我在没有代码片段的情况下发布此问题，因此发布 HTML 代码以供引用。相关的 CSS 代码可以在 jsfiddle 链接中找到。
<body>
<div class="container">
<div class="header">
</div>
<div class="content">
<div class="left">
</div>
<div class="middle">
<p align="right">hello</p>
<p>hello</p>
<p align="right">hello</p>
<p>hello</p>
</div>
<div class="right">
</div>
</div>
</div>
</body>
最佳答案
您看到的差距是因为浏览器添加了...
body {
margin: 8px;
}
...默认情况下。
您可以在您的 CSS 中覆盖它。
.middle 的高度没有扩展，因为您正在使用 height。尝试使用 min-height 代替。另请注意，您在 middle 的底部有一个边距。html,
body {
height: 100%;
}
body {
margin: 0;
}
div.container {
height: 100%;
width: 100%;
position: relative;
}
div.header {
height: 50px;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #558c89;
}
div.content {
margin-top: 50px;
}
div.left,
div.right {
width: 150px;
top: 50px;
bottom: 0;
position: fixed;
background-color: #74afad;
}
div.middle {
margin: 50px 150px;
background-color: #ececea;
min-height: 100%;
}
div.content,
div.left,
div.right {
height: 100%;
}
div.left {
left: 0;
}
div.right {
right: 0;
}<html>
<head>
<title>Layout</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open Sans">
</head>
<body>
<div class="container">
<div class="header">
</div>
<div class="content">
<div class="left">
</div>
<div class="middle">
<p align="right">hello</p>
<p>hello</p>
<p align="right">hello</p>
<p>hello</p>
<p align="right">hello</p>
<p>hello</p>
<p align="right">hello</p>
<p>hello</p>
<p align="right">hello</p>
<p>hello</p>
<p align="right">hello</p>
<p>hello</p>
<p align="right">hello</p>
<p>hello</p>
<p align="right">hello</p>
<p>hello</p>
<p align="right">hello</p>
<p>hello</p>
<p align="right">hello</p>
<p>hello</p>
<p align="right">hello</p>
<p>hello</p>
<p align="right">hello</p>
<p>hello</p>
</div>
<div class="right">
</div>
</div>
</div>
</body>
</html>关于html - 为什么2个<div>都在考虑不同宽度的屏幕进行渲染？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48042386/
27
4
0
我一直认为使用“if”比捕获异常要好得多(就性能而言)。例如，这样做: User u = Users.getUser("Michael Jordan"); if(u!=null) System.
我正在尝试使用下一个格式将字符转换为日期。我有下一个数据框 i (我在最后添加了 dput() 版本的数据框): Date 1 Dec_28_2012_9:
考虑到 PHP 中的日期戳，我如何计算持续时间？我在日期之间使用的日期格式是“Y-m-d H:i:s”， 我的工作代码只能计算时间之间的持续时间而不考虑日期。 下面是我的代码: $assigned_t
我正在尝试解释 GLMM 中的自相关。我的响应变量是 bool 值，它表示一组 hive 的生命周期中是否存在 en 事件。我试图用一组描述每个巢状态的数值变量来预测此类事件的概率。因此，我在广义模型
我对如何解释 undefined variable 感到有点困惑(我不确定你现在是否可以)。我正在尝试使用以下代码底部附近的 if else 语句(已注释掉的行)。 这个想法是，如果请求歌曲的人不是与
Bjarne Stroustrup 的 The C++ Programming Language Fourth Edition 中的以下内容是什么意思？ "Consider . (dot) suspe
我想要一个主元素，边 block 漂浮在它的右侧。我不知道边 block 的数量，也不知道它们的最终总高度。但是我的主要元素应该具有相同的高度(请参阅以下示例以更好地理解)，而无需使用列。 (虚线部分
我在每个 TextView 上都有以下警告(来自 Lint)，在我的 XML 中有一个 ID。 Consider making the text value selectable by specify
目前，我有 6 条曲线，以 6 种不同的颜色显示，如下所示。 这 6 条曲线实际上是由 一个相同实验 的 6 次试验生成的。这意味着，理想情况下它们应该是相同的曲线，但由于噪声和不同的试验参与者，它们
winner of a recent Wikipedia vandalism detection competition建议可以通过“检测考虑到 QWERTY 的随机键盘点击来改进检测键盘布局”。 示
多年来，我一直在编写 C 语言，主要是在嵌入式环境中，并且对指针有一个非常好的心智模型——我不必明确地考虑如何使用它们，我对指针算法 100% 感到满意，指针数组，指针指针等。 我写的 C++ 很少，
我正在使用 Boost.Date_time 来获取两个日期之间的时差。我希望代码在这些天也考虑夏令时的变化，并给我正确的时间间隔。 考虑这个例子。 2015 年 11 月 1 日，美国的 DST 将发
我有一个(人类)名字的向量，全部用大写字母表示: names <- c("FRIEDRICH SCHILLER", "FRANK O'HARA", "HANS-CHRISTIAN ANDERSEN")
我想呈现一个表单小部件。这是我要生成的原始 HTML: 使用这个: {{ form_row(form.email, { 'type' : 'email', 'attr' : { 'class' :
我正在开发一个 python 项目，它使用 pythonnet 和几个 C# dll 作为依赖项。 由于我不想将 dll 推送到 git 存储库，因此我调整了 .gitignore 文件。但是，现在
考虑到上午/下午，我想将字符串转换为 php 数据时间。 我想将 '03/06/2015 12:17 am' 转换为 php datatime。 我试过了， $myDateTime = DateTim
我想排除那些具有相同标题和同一年份的实例。 title votes ranking year 0 Wonderland 19 7.9 1931 1
例如对于一个 EditText，通常指定 android:inputType="numberDecimal"用于文本字段应该包含十进制数。但这假设“。”用作小数点分隔符，在某些国家/地区使用“,”代替
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improv
作为练习，我决定学习 Java 中的 lambda 表达式。我想重写我发现笨拙且冗长的旧代码。它检查命令行参数是否是(1)文件路径或(2)目录路径。在(1)场景中，它将命令行参数传递给方法。在 (2)
我是一名优秀的程序员,十分优秀！