- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在制作一个包含 3 个 div 的布局:
header-div: height 50px 固定且始终位于顶部
container-div: height auto
footer-div:高度固定为 50px,始终位于底部
在 header- 和 footer-div 之间,container-div(jsFiddle 中的红色 div)必须根据其内容调整大小。整个主体都需要溢出,不仅是这个 div(我的意思是:你必须向下滚动 - 如果容器 div 中有很多内容 - 才能看到页脚 -div,而不是“固定始终可见”的页脚-div).
到目前为止我的代码:http://jsfiddle.net/up86vaw0/
HTML:
<div id="body-wrapper">
<div id="body-wrapper-header" style="background:blue;">
header
</div>
<div id="body-wrapper-container" style="background:red;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="body-wrapper-footer" style="background:green;">
footer
</div>
</div>
CSS:
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
margin: 0;
}
#body-wrapper{
display: flex;
height: 100%;
flex-direction: column;
}
#body-wrapper > #body-wrapper-header{
flex: 0 1 100px;
}
#body-wrapper > #body-wrapper-container{
flex: 1 1 auto;
}
#body-wrapper > #body-wrapper-footer{
flex: 0 1 auto;
border-top: 1px solid #cccccc;
box-shadow: -1px -1px 1px #eeeeee;
background: #ffffff;
padding: 10px;
}
如您所见,红色 container-div 没有调整大小(高度)。
有人知道吗?
提前致谢
最佳答案
也许这样的事情会做:
HTML:
<body>
<header>
</header>
<div id="content">
</div>
<footer>
</footer>
</body>
CSS:
header {
background-color: red;
height: 150px;
}
footer {
background-color:blue;
height: 50px;
}
#content {
background-color: green;
display:flex;
flex-direction: column;
}
这是一个 demo
关于html - 灵活的 'container' -div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29580309/
我有以下几行代码: using XXX.PAD.PaidServices; using YYY= XXX.PAD.PaidServices.Judet; //// uncomment below fo
我正在寻找一种方法,让 LAN 中的客户端无需任何配置即可找到我的服务器应用程序的所有实例。我不想自己破解某些东西,而是想使用现有的解决方案。就个人而言,我需要用 Python 完成它,但我很乐意听到
我的“问题”或“挑战”有很多问题。但它们都不符合我的需求。好的,我开始了: 我想要一个保存可变属性的数据库。现在我将它们作为列名“硬编码”到数据库中(参见图片)。请参阅“颜色”和“尺寸”。但是如果我想
我正在为我的一个 friend 创建一个网站。我们得到了这些布局,我已经放了一个灵活的背景,可以缩放到当前的浏览器大小。但是放置在背景上的图标需要在缩放窗口时保持相对位置。意味着如果我调整窗口大小,让
案例 通常,您会使用 cellForRowAtIndexPath 委托(delegate)方法来设置单元格。单元格的信息集对于单元格的绘制方式和大小非常重要。 不幸的是,heightForRowAtI
我试图让下面的 div 变得灵活 div { min-width: 500px; max-width: 1000px; width:100%; height: 400px; margin-left:1
我在单元测试方面遇到问题。当我运行测试时,它以 "No tests found" 结束。我正在使用 AppCode 和 Quick/Nimble 框架进行单元测试,但它在 XCode 中也不起作用。
问之前,请理解我的英语不好。 我在 servlet 编程中使用 Class.forName(...) 类。当我访问 servlet 时,我从数据库中获得一行详细的 Controller 信息,指示要使
我创建了一个cron job在 GAE 灵活环境中,每 15 分钟自动运行一次。 但是在创建每个实例时,是否会为每个实例复制相同的 cron 作业?我对此不太确定。 最佳答案 不,不会为每个实例复制
div A 灵活且固定(位于窗口顶部),具有高 z-index,因此下方的元素可以在滚动时从下方通过。 div B 位于 div A 下方,我希望它“粘”在 div A 的底部,因为在调整窗口大小时高
我是 Quick/Nimble 的新手,所以我尝试了一个简单的单元测试: import Quick import Nimble class DarkSkyTests: QuickSpec {
我创建了一个演示。关于表格单元格的灵 active ,我需要一些帮助。 我有一些表格单元格,它们的宽度应该是固定的。 但单元格由标签组成,标签可以是长文本,也可以是短文本。 基于此标签,表格单元格应该
我非常熟悉在代码中需要“水平带”的网站 - 即使他们的内容固定在 960 像素以内,他们的背景也会向左和向右“延伸”。 我知道如何做这些,如果它们只有一种颜色,或者我可以用作背景的一张图片。 最近一位
我在自己编写的网站(无框架或 CMS)上使用 Cloudflare Flexible SSL。一切正常,现在我想在整个网站上使用 HTTPS。我在 Apache Web 服务器上使用 PHP。 我想知
我有这个 Java 接口(interface): public interface Box { public void open(); public void close(); } 这个接
所以我有一个“主要”功能系统,现在可以作为 CMS 使用:用户进入编辑器并从四个模板中选择一个。在模板中,他们单击可以添加图像、文本或两者的部分。 我有一个预览屏幕,可以向他们展示他们正在制作的东西,
下面的 HTML/CSS/Javascript (jQuery) 代码显示了 #makes 选择框。选择一个选项会显示带有相关选项的 #models 选择框。 #makes 选择框偏离中心,#mode
我正在使用固定高度的图像来填充具有渐变颜色的 div,方法如下:背景:透明 url(green_bg.gif) repeat-x scroll 0 0; 但是它只填充一个等于图像高度的高度。根据其中的
我的系统的 GUI 在 1366 X 768 分辨率下运行良好。当它以不同的分辨率显示时,我需要并排滚动,而它不应该这样。此外,当我尝试在 chrome 中按 ctr+- 时,div 和部分变得困惑。
我正在尝试在 google app engine 灵活环境中使用 python 编写日志。 我想使用默认的 python 日志记录库并使用处理程序进行日志记录。这是我的代码: import loggi
我是一名优秀的程序员,十分优秀!