- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
以此Demo Template开始,我想创建这个布局:
但是我有以下问题:
有人可以帮我解决这些问题吗?
最佳答案
display:grid
这使用了 CSS 的几个新功能,您选择的浏览器可能支持也可能不支持这些功能。这些包括 Grid Layout , CSS Variables , 和 position:sticky
. CSS 变量可以使用静态值来解决,而 Grid/position:sticky
可以使用 @supports
优雅地降级。 .
/* Remove unnecessary margins/padding */
html, body { margin: 0; padding: 0 }
.wrapper {
display: grid;
/* Header and footer span the entire width, sidebars and content are fixed, with empty space on sides */
grid-template-areas:
"header header header header header"
"empty_left sidebar_1 content sidebar_2 empty_right"
"footer footer footer footer footer";
/* Only expand middle section vertically (content and sidebars) */
grid-template-rows: 0fr 1fr 0fr;
/* 100% width, but static widths for content and sidebars */
grid-template-columns: 1fr 100px 400px 100px 1fr;
/* Force grid to be at least the height of the screen */
min-height: 100vh;
}
.header {
grid-area: header;
/* Stick header to top of grid */
position: sticky;
top: 0;
/* Ensure header appears on top of content/sidebars */
z-index: 1;
/* General appearance */
background-color: #FCFF34;
text-align: center;
font-size: 1rem;
line-height: 1.5;
padding: 1rem;
}
/* Save header height to properly set `padding-top` and `margin-top` for sticky content */
:root {
--header-height: calc(1rem * 1.5 + 1rem * 2);
}
.sidebar-1 {
grid-area: sidebar_1;
}
.sidebar-2 {
grid-area: sidebar_2;
}
.sidebar-1,
.sidebar-2 {
display: flex;
flex-direction: column;
position: sticky;
top: 0;
/* Styling to match reference */
background-color: #BC514F;
}
.content {
grid-area: content;
/* General appearance */
background-color: #99BB5E;
}
.footer {
grid-area: footer;
/* Stick footer to bottom of grid */
position: sticky;
bottom: 0;
/* General appearance */
background-color: #FCFF34;
text-align: center;
font-size: .8rem;
line-height: 1.5;
padding: .5rem;
}
/* Save footer height to properly set `bottom` and `min-height` for sticky content */
:root {
--footer-height: calc(.8rem * 1.5 + .5rem * 2);
}
.sticky-spacer {
flex-grow: 1;
}
.sticky-content {
position: sticky;
bottom: var(--footer-height);
min-height: calc(100vh - var(--footer-height));
box-sizing: border-box;
--padding: 10px;
padding:
calc(var(--header-height) + var(--padding))
var(--padding)
var(--padding);
margin-top: calc(0px - var(--header-height));
}
<div class="wrapper">
<div class="header">Header (Absolute)</div>
<div class="sidebar-1">
<div class="sticky-spacer"></div>
<div class="sticky-content">Sidebar 1 Absolute position, Fixed width</div>
</div>
<div class="content">
<div class="sticky-spacer"></div>
<div class="sticky-content">
Scrollable content<br><br>
line 1<br><br>
line 2<br><br>
line 3<br><br>
line 4<br><br>
line 5<br><br>
line 6<br><br>
line 7<br><br>
line 8<br><br>
line 9<br><br>
line 10<br><br>
line 11<br><br>
line 12<br><br>
line 13<br><br>
line 14<br><br>
line 15<br><br>
line 16<br><br>
line 17<br><br>
line 18<br><br>
line 19<br><br>
line 20
</div>
</div>
<div class="sidebar-2">
<div class="sticky-spacer"></div>
<div class="sticky-content">
Sidebar 2 Absolute position, Fixed width<br><br>
line 1<br><br>
line 2<br><br>
line 3<br><br>
line 4<br><br>
line 5<br><br>
line 6<br><br>
line 7<br><br>
line 8<br><br>
line 9<br><br>
line 10
</div>
</div>
<div class="footer">Footer (Absolute)</div>
</div>
内容框(包括边栏)可以设置为任何类型的宽度(百分比、像素等)。只有可滚动的内容区域会滚动(侧边栏/页脚/页眉只会溢出框)。我建议添加一些媒体查询以突破侧边栏,这样内容就不会隐藏在较小的设备上,或者在内容框上设置 min-height
和 min-width
在 body
上。
html, body {
height:100%;
margin:0;
padding:0;
}
header{
width: 100%;
background: yellow;
position: fixed;
top: 0;
height: 60px !important;
opacity:.8;
}
.content {
position:relative;
height: 100%;
width:600px; /* Sizing - any length */
padding:60px 0 30px 0; /* Header height and footer height */
margin:0 auto 0 auto; /* Center content */
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
.sidebar1, .sidebar2 {
background: red;
top:60px;
bottom:30px;
width: 100px;
position:absolute;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
.sidebar1 {
left:0;
}
.sidebar2 {
right: 0;
}
#scrollable2 {
background:green;
height: 100%;
min-width: 300px;
margin-left: 100px;
margin-right: 100px;
overflow:auto;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
footer {
width: 100%;
background: yellow;
position: fixed;
bottom: 0;
height: 30px;
}
<!-- Always on top: Position Fixed-->
<header>
header
</header>
<!-- Fixed size after header-->
<div class="content">
<!-- Always on top. Fixed position, fixed width, relative to content width-->
<div class="sidebar1">
sidebar-left
</div>
<!-- Scrollable div with main content -->
<div id="scrollable2">
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
</div>
<!-- Always on top. Fixed position, fixed width, relative to content width -->
<div class="sidebar2">
sidebar-right
</div>
</div>
<!-- Always at the end of the page -->
<footer>
footer
</footer>
虽然可以使用浏览器的主滚动条,但它也会导致侧边栏随页面滚动。
html, body {
height:100%;
margin:0;
padding:0;
}
header{
width: 100%;
background: yellow;
position: fixed;
top: 0;
height: 60px !important;
z-index:100;
}
.content {
position:relative;
min-height: 100%;
width:600px; /* Sizing - any length */
padding:60px 0 30px 0; /* Header height and footer height */
margin:0 auto 0 auto; /* Center content */
}
.sidebar1, .sidebar2 {
background: red;
height:100%;
width: 100px;
top:0;
padding-top:60px;
position:absolute;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
.sidebar1 {
left:0;
}
.sidebar2 {
right: 0;
}
#scrollable2 {
height:100%;
background:green;
min-width: 300px;
margin-left: 100px;
margin-right: 100px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
footer {
width: 100%;
background: yellow;
position: fixed;
bottom: 0;
height: 30px;
}
<!-- Always on top: Position Fixed-->
<header>
header
</header>
<!-- Fixed size after header-->
<div class="content">
<!-- Always on top. Fixed position, fixed width, relative to content width-->
<div class="sidebar1">
sidebar-left
</div>
<!-- Scrollable div with main content -->
<div id="scrollable2">
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
content-main<br>
</div>
<!-- Always on top. Fixed position, fixed width, relative to content width -->
<div class="sidebar2">
sidebar-right
</div>
</div>
<!-- Always at the end of the page -->
<footer>
footer
</footer>
关于html - 固定页眉、页脚和边栏,中间有滚动内容区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10056583/
有人可以给我一个更简单的以下代码的解决方案(它正在展开给定结构 0xFC :: len :: payload :: ... :: 0x0A :: 0x0D 的整数列表): object Payload
我已经在我的网站上安装了 SSL 证书,但 intermediate.crt 无法正常工作。任何 SSL 检查器(例如 GeoTrust Checker)都告诉我,缺少中间 key 。网站上已经使用了
如何让图像从这个框的中间开始? (中间纵横) 最佳答案 有几种方法可以做到这一点,如果它需要在所有浏览器(IE7+ 和其他浏览器)中工作,你需要做不同的事情来让它在某些情况下工作。 使用绝对位置
如何强制 min-height 和 vertical-align:middle 为 td 元素或其内部元素工作? 最佳答案 td 元素上的 height 等同于 min-height,因为如果需要,表
我正在尝试自动滚动到订单簿的中间行。 我有 orderBook div,其中放置了带有 orderBook 的表。该表的其中一行有一个 id middleRow。我想做的是滚动该行并将其放置在 ord
我正在尝试在 javascript 中计算绝对定位元素的 transform-origin 属性,以便它们在悬停时填充整个视口(viewport)。 我尝试通过 x 除以窗口宽度和 y 除以窗口高度来
我有休闲字符串 ' this is my string ' 是否可以删除开头和结尾的所有空格,只在单词之间留一个空格。 要选择我使用过的所有空间: SELECT regexp_replace('
我正在设法创建我的第一个复杂的 J2E 解决方案,并且在每个教程中我都发现了某种中间表的用法,如下所示: 表:用户、用户角色、角色虽然逻辑会简单地向用户表添加一个键来引用它在角色表上的角色,但为什么要
我正在寻找以下解决方案。我想定位一个图像元素,例如 在中间。所以高度是视口(viewport)的高度,宽度会自动设置,图像的中间应该在视口(viewport)宽度的中间。 我搜索的一个例子就像下面的网
我正在设计一种布局,它更像是注册用户的个人仪表板。我让它变得简单,使用基本的 2 列网格,一个用于侧边栏,一个用于主要内容。 因为,例如,80% 的网站使用将发生在一个单独的子系统中,在无 chrom
我有三个不同的 div 标签(不在彼此内部)和代码,所以它有一个把单词放在左边、中间或右边,但中心非常偏离中心。这是 HTML 代码: .desc { float: right; color:
我有以下CSS http://jsbin.com/azivip/75/edit我想让黄色的 div 高度填充蓝色和绿色 div 之间的空间。使用高度继承似乎使 div 超出了绿色 div。 有什么想法
我不得不在其父元素的中间放置一些文本。我用下面的代码实现了它: #div1 { position: relative; margin: 0; padding: 0; } #div2 {
发现一个使用合法证书(由thawte 签名)的网站,但所有浏览器都会拒绝它。我不明白为什么。thawte 的支持告诉我一个域有两个证书,然后将这个 https://www.sslshopper[dot
我正在尝试使用 OpenSSL 创建证书链,但出于某种原因,当我在我的计算机上安装我的根 CA 并尝试验证证书链时,它总是告诉我它找不到证书的颁发者.为了让事情发生,我必须安装中间 CA,这是没有意义
我看到 REST 的一大好处是依赖 HTTP 缓存。我不是在争论这个,而是完全认同这个想法。但是,我从来没有看到对中间 HTTP 缓存的更深入的解释。 如果我将 Cache-control heade
查看此图片 Facebook Messenger Android App Buttons ( MESSENGER\ACTIVE ) 我怎样才能做到这一点? 详细信息:- 带有 2px 红色边框的 di
我的任务是制作漂亮的文本,在文本中间加一条白线,如下图所示。是否可以使用 css 来实现?这是 Fiddle .container{ height:200px; width:400px;
在拉丁文字中,字母有大写和小写形式。在 Python 中,如果你想比较两个字符串而不考虑它们的大小写,你可以使用 'string'.upper() 或 'string'.lower() 将它们转换为相
我正在使用 awk 对文件进行一些文本处理。例如删除尾随空格。 awk '{gsub(/ +$/, "")} {print $0}' filename 这很好用。但是当我将输出重定向到原始文件时。它变
我是一名优秀的程序员,十分优秀!