首页 文章

CSS DIV容器100％宽度，最小宽度100％（封面全屏）

提问于
浏览 次
0

我正在尝试创建一个包含两个DIV的HTML页面 . 我希望每个DIV都能覆盖所用设备的全屏 . 简单的例子：

<body>
<div class="foo">Some content</div>
<div class="foo">Another content</div>
</body>

我的css-File看起来像这样

html,body {
margin: 0;
padding: 0;
width: 100%;
min-width: 320px;
height: 100%;
}

.foo {
 position: relative;
 height: 100%;
 }

这是有效的，但是当达到100％的屏幕高度时，第一个DIV（foo）的内容在DIV的底部被切断 . 好的，所以我试着改变我的CSS，将 height 更改为 min-height 在body，html和foo-Element上 . 现在我知道：这不是解决方案 .

再说一遍：我希望DIV foo的高度为100％（与浏览器屏幕相关），即使内容较少 . 但是如果内容很长， height DIV foo应该"grow"与内容 .

html css css3

3 回答

  • 0

    试试这个

    html,body {
margin: 0;
padding: 0;
width: 100%;
min-width: 320px;
}

.foo {
 position: relative;
 width: 100%;
 }

    <body>
<div class="foo">Some content</div>
<div class="foo">Another content</div>
</body>
    回复于
  • 0

    嗯 . 我不知道这是否是你想要实现的目标：fiddle

    我刚补充说：

    overflow-y:scroll;

    你的foo元素 .

    但是有一个双滚动条是非常难看的，所以我隐藏了身体滚动条，只留下了一个 .

    如果这是我的项目，我甚至会隐藏两个滚动条，因为这些天每个人都使用mause wheel . 唯一的问题是让用户知道有隐藏的内容所以我会在第一个foo容器的右下角添加一个grafic元素（类似箭头向下）

    回复于
  • 0

    试试这个，

    HTML

    <div class="foo">Some content</div>
<div class="foo">Another content</div>
<div class="foo">Another content</div>
<div class="foo">Another content</div>

    CSS

    html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
    min-width: 320px;
}
.foo {
    height: 100%;
}

    检查这个fiddle

    回复于

相关问题