相关疑难解决方法(0)
3行,100%高度布局,带有flexbox
我想知道:是否可以使用flexbox构建3行布局,100%高度？
<header> The header content goes here. </header>
<div class="content"> The main content goes here. </div>
<footer> The footer content goes here. </footer>
固定高度的页眉和页脚,同时满足液体部分.
我的意思是,这样的事情,但没有绝对的定位:
* {
margin: 0;
}
header {
position: absolute;
width: 100%;
height: 64px;
top: 0;
background: red;
}
footer {
position: absolute;
width: 100%;
height: 64px;
bottom: 0;
background: green;
}
.content {
position: absolute;
width: 100%;
top: 64px;
bottom: 64px;
background: blue;
}<header>The header content goes here.</header>
<div class="content">The main content goes here.</div> …5
推荐指数
推荐指数
2
解决办法
解决办法
4522
查看次数
查看次数
如何设置 flexbox 容器的高度以便它使用“剩余空间”
我正在努力理解 flexbox 容器如何与其他块交互。我的页面上只有一个 flexbox，我可以做我想做的事。但是当我混入其他页面元素时，事情变得很奇怪。问题似乎是空间分配。
我的 flexbox 容器似乎需要一个明确的高度。如果我不指定，我不会得到包装行为。我不确定如何指定 flexbox 容器的高度。
如果我将 flexbox 容器的高度设置为 100%，它会根据需要包装，但我被滚动条卡住了：我分配了超过 100% 的高度。我想在 flexbox 容器上方分配 100px。所以我需要将 flexbox 容器的高度设置为 100% - 100px。我不能混合绝对和相对测量。往下看，我宁愿根本不必做这个数学运算，这将成为维护方面的麻烦。
下面是一个例子，说明我哪里出错了。我想在页面顶部有一些说明。说明应跨越页面的宽度。在下面的空间中，我想要一组按钮。按钮应根据需要换行以使用多列。
我可以通过按钮 flexbox 容器内的说明使其工作。但是，它不会像我想要的那样 100%，它会与我的按钮混在一起。
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
border: 1px solid #A00;
}
.instructions {
height: 100px;
background: linear-gradient(to bottom, #ffffff 0%, #999 100%);
}
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 80%;
}
.button {
width: 200px;
height: 50px;
margin: 10px;
background: linear-gradient(to bottom, #ffffff 0%, #BBB 100%); …5
推荐指数
推荐指数
1
解决办法
解决办法
3万
查看次数
查看次数
Flexbox - 填充剩余空间
我有一个像这样的基本 flexbox 布局..
body,html {
height:100%;
width:100%;
}
#container {
width:100%;
background:grey;
display:flex;
flex-direction:column;
}
.top {
background:red;
flex:1;
padding:20px;
}
.bottom {
background:yellow;
flex:1;
padding:20px;
}<div id="container">
<div class="top">
Top Content
</div>
<div class="bottom">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis, arcu vitae sollicitudin pellentesque, quam libero imperdiet urna, eu rhoncus lorem dolor sed neque. Donec ex risus, pretium ut maximus fringilla, euismod id mi. Phasellus ligula sem, iaculis ut urna eget, efficitur vulputate sem. …4
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
高度为100％的Div溢出到其父级下的flexbox行
我在flexbox数组中有一系列元素。每个元素包含一个“卡”，其高度不同。当我尝试使卡占据它们所居住的flexbox子元素的剩余空间时，它们会溢出到下面一行的元素中。如果我指定所有flex-children的高度均为100％，则它们的高度实际上会塌缩为它们内部卡片的大小。
#flex_parent {
margin: 1em;
display: flex;
flex-wrap: wrap;
}
.flex-child {
box-sizing: border-box;
margin-bottom: 1em;
width: 50%;
}
.full-height {
height: 100%;
background: #99F !important;
}
.child-description {
height: 100%;
}
/* cosmetic */
body {
background: black;
color: white;
}
h4 {
color: red;
}
.flex-child {
border: 1px dotted red;
}
.child-card {
background: #FFA;
color: #000;
}<body>
<div id="flex_parent">
<div class="flex-child">
<h4>Title title title</h4>
<div class="child-card">
<div class="child-description">
<p>123 123</p>
</div>
</div>
</div>
<div class="flex-child"> …4
推荐指数
推荐指数
1
解决办法
解决办法
48
查看次数
查看次数
如何使<div>填充离子中的剩余高度
实际上我正在尝试重建我的Android应用程序作为混合应用程序与离子.
可能我的问题更多是关于CSS.但也许有一些离子魔法可以创建以下布局
我需要三个DIV.一个在屏幕的顶部,一个在中间,一个在底部.
顶部的一个有固定的大小,底部的div应该需要很多游戏.
中间div应该使用剩余的空间.
这是我的初稿.我试着玩风格,但现在我迷失了:
<ion-content>
<div style="border:solid 1px #333333"></div>
<div style="border:solid 1px #333333"></div>
<div style="border:solid 1px #333333">
<div class="row">
<div class="col"><button class="button button-block button-stable">1</button></div>
<div class="col"><button class="button button-block button-stable">2</button></div>
<div class="col"><button class="button button-block button-stable">3</button></div>
</div>
<div class="row">
<div class="col"><button class="button button-block button-stable">4</button></div>
<div class="col"><button class="button button-block button-stable">5</button></div>
<div class="col"><button class="button button-block button-stable">6</button></div>
</div>
<div class="row">
<div class="col"><button class="button button-block button-stable">7</button></div>
<div class="col"><button class="button button-block button-stable">8</button></div>
<div class="col"><button class="button button-block button-stable">9</button></div>
</div>
<div class="row">
<div class="col"><button class="button button-block button-stable">Copy</button></div> …3
推荐指数
推荐指数
1
解决办法
解决办法
4760
查看次数
查看次数
如何使用flexbox填充剩余高度？
html,
body {
height: 100%;
}
.site-main {
height: calc(100% - 72px);
display: flex;
}
.site-main > div {
min-width: 85%;
height: 100%;
}
.site-main > aside {
min-width: 15%;
height: 100%;
background-color: $darkest-blue-grey;
}<header>
<h1>Title</h1>
</header>
<div class="site-main">
<div></div>
<aside></aside>
</div>我有header一个固定height的72px.
我给了.site-main div一个width的85%.
我给了 .site-main aside一个width的15%.
我想要的是.site-main div并.site-main aside肩并肩,并.site-main填补剩余的空白区域header.
并拥有.site-main div …
2
推荐指数
推荐指数
1
解决办法
解决办法
2409
查看次数
查看次数
HTML5 / CSS全高布局
好的，这是我的基本网站结构：
<body>
<div id="wrapper">
<header><a href="/"> </a></header>
<nav>
<ul>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
<li><a href="...">...</a></li>
</ul>
</nav>
<div id="content"></div>
<footer><a href="/"> </a></footer>
</div>
</body>
这是我的CSS基础知识：
html
{
font-size: 100%;
height: 100%;
line-height: 1.4;
overflow-y: scroll;
}
body
{
background: #EEE url("../images/background.png") repeat-y center center fixed;
color: #333;
height: 100%;
font: 1em 'Lato-Regular';
margin: 0;
padding: 0;
}
#wrapper
{
height: 100%;
margin: 0 auto;
width: 960px;
}
#content
{
min-height: 460px;
height: auto !important;
height: 460px;
margin: 20px 0;
} …1
推荐指数
推荐指数
1
解决办法
解决办法
3094
查看次数
查看次数
如何使3个DIV的中间伸展以垂直填充
请参阅以下代码段.
.frame {
height:10em;
padding:2px;
border:solid 1px black
}
.title {
height:2em;
overflow-y:scroll;
border:solid 1px green
}
.body {
height:100%; //??
overflow-y:scroll;
border:solid 1px red
}
.footer {
border:solid 1px blue
} <div class="frame">
<div class="title">
headline
</div>
<div class="body">
<p>... body ... </p>
</div>
<div class="footer">
<textarea style="height:2em;width:95%"></textarea>
</div>
<div>是否有可能使红色(.body)div填满绿色(.title)和蓝色(.footer)div之间的间隙,并使所有三个完全适合黑色框架而不在脚本中计算高度？
1
推荐指数
推荐指数
1
解决办法
解决办法
727
查看次数
查看次数
响应式 Flexbox 填充所有浏览器高度
我正在学习 Flexbox，我的目标是创建一个包含 3 个项目的简单 Flexbox，这些项目将响应不同的设备（智能手机、平板电脑、台式机\xe2\x80\xa6）。\n这些项目应该一个在另一个之上，并且\n（总结一下，一项位于最顶部，一项位于页面底部，其余项占据中间的左侧空间）。
\n桌面和智能手机上的宽度部分似乎有效。但如何填充浏览器的高度以及字体和框如何适应不同设备的不同高度对我来说仍然是一个谜。
\n我的临时解决方案是增加smartphone\xe2\x80\xa6的margin
\n你怎么看？
\n这是我所做的：
\n\r\n
\r\n
.container {\n display: flex;\n flex-wrap: wrap;\n width: 100%;\n height: 100%;\n font-size: 3em;\n}\n\n.item {\n border: 5px solid red;\n margin-bottom: 40px;\n}\n@media screen and (max-width: 500px) {\n .element {\n margin-bottom: 70px;\n }\n}\n\n.one {\n flex-basis: 100%;\n display: flex;\n}\n\n.two {\n flex-basis: 80%;\n display: flex;\n}\n\n@media screen and (max-width: 64em) {\n body {\n font-size: 80%;\n }\n}\n\n@media screen and (max-width: 50em) {\n body {\n font-size: 70%;\n }\n}\n\n@media screen and (max-width: 30em) {\n …0
推荐指数
推荐指数
1
解决办法
解决办法
1404
查看次数
查看次数