- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我想让第一个 div layer1
(红色 block )显示窗口的完整大小,可缩放。Layer2
(蓝色 block )假设始终在 layer1
之下。但是,当我将窗口高度变短时,我发现 layer2
到了 layer1
的中间,请看下图
所以我尝试在 layer1
上应用 overflow:hidden
,但是 layer2
蓝色区域仍然重叠在 layer1 上。如何以正确的方式做到这一点。好像跟手机一样改变窗口大小,看起来不对:(
请看手机 View
如果有人能帮忙。谢谢
HTML
<div class="layer1">
<h1>HELLO WORLD</h1>
<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 class="layer2">
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
</div>
CSS
html,body{
height: 100%;
}
body{
padding: 0;
margin: 0;
}
.layer1{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background:red;
}
.layer2{
background:blue;
position:relative;
top:100%;
}
最佳答案
如果您将样式更改为以下内容
html,body{ height: 100%; padding: 0; margin: 0;}
.layer1{ width: 100%; min-height: 100%; background:red; overflow:auto;}
.layer2{ background:blue; position:relative; overflow:auto;}
它应该做你想做的事:fiddle
关于html - 窗口的第一个 Div 全尺寸,空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21675895/
我的网站使用 AmCharts,我想将其设为全尺寸。例如,我有以下代码: #chartdiv { width : 50%; height : 500px; float : left; } var
您需要使用edge或mozilla打开以下页面。 这是页面:codepen.io 这是我尝试过的: html{ max-height:1900px; max-width:2600px; } 因
我正在尝试通过以下代码使 html5 canvas 变为全尺寸。我知道还有其他使用 javascript 的方法,但是这有什么问题吗? Canvas_dot #m
如何达到outerPanel的全宽? private JPanel createLabelPanel() { final JToolTip tt = new JToolTip(
我的页面分为 3 个部分。 , 和 . 固定在顶部,大小为 109px,边框高 6px,因此 到顶部有 109 像素的边距。 我想要 扩展到 下面的整个页面和 那应该,如果没有可用于将其向下推的
我有一个网站需要在浏览器窗口中完全独立,即用户不必上下滚动即可查看网站的不同部分。太长而无法放入内容 Pane 的内容由 overflow:auto 处理,效果很好。 问题是,无论我怎么尝试,我仍然遇
我正在尝试设置一个网页,但由于我的元素的高度,我快疯了。特别是,我想要的布局是: 顶部有一个固定高度(例如 150 像素)和 100% 宽度的标题。 在标题下,我需要两列。左边的列有固定的宽度(例如
如何在 XAML 中将根布局的尺寸设置为 的 100% 宽度和高度?包含 Silverlight 应用程序的标记。 我试过指定 100%,但宽度和高度属性只采用单位文字(精确像素)。有没有办法让 S
ONLINE SAMPLE 我想让第一个 div layer1(红色 block )显示窗口的完整大小,可缩放。Layer2(蓝色 block )假设始终在 layer1 之下。但是,当我将窗口高度变
我不确定如何解释我到底想要什么(这也很难用谷歌搜索),但我想创建一个表格,每个单元格都有特定的宽度和高度(比如 40x40 像素) . 这个表格将比视口(viewport)大很多,所以它需要一些滚动,
我是一名优秀的程序员,十分优秀!