相关疑难解决方法(0)
Flexbox高度百分比
我有一个基本的flexbox布局，正在尝试将高度百分比应用到其中，目前它们都占据相同的百分比…
html,
body {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
.row_one {
background: blue;
height: 30%;
}
.row_two {
background: wheat;
height: 30%;
}
.row_three {
background: yellow;
height: 40%;
}
.fill-height-or-more {
min-height: 100%;
display: flex;
flex-direction: column;
}
.fill-height-or-more > div {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}<section class="some-area fill-height-or-more">
<div class="row_one">
Row 1
</div>
<div class="row_two">
Row 2
</div>
<div class="row_three">
Row 3
</div>
</section>flexbox甚至有可能吗？如果是这样，有人能给我指出一个方向的例子吗？
推荐指数
解决办法
查看次数
CSS 网格，网格项“高度：100%”在 Chrome 中不起作用
这是我在这里的第一篇文章......所以希望我能在这个问题中得到所有必要的信息。
我一整天都在努力尝试在我正在创建的某些卡片上获得正确的网格功能（请参阅下面的屏幕截图链接）。工作一段时间后，我能够在 Firefox 中获得我想要的结果，但是当我在 Chrome 中测试时......它与 Firefox 并不相同。
火狐搜索结果
Chrome 结果
似乎当我注释掉“高度：100%；” 在图像上，Chrome 中的功能更好，但仍然不是我想要的。
Chrome 带有“高度：100%；” 移除：
这是我的标记：
.projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
grid-gap: 7rem;
&__item {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
}
&__img {
width: 100%;
height: 100%;
grid-column: 1 / -1;
grid-row: 1 / 2;
display: block;
object-position: center;
object-fit: cover;
}
}<section class="projects">
<div class="projects__item projects__item--1">
<img src="img/projects-1.png" class="projects__img">
<div class="projects__content">
<h3 class="projects__heading--3 heading-3">Project Title</h3>
<p class="projects__text">
Insert …推荐指数
解决办法
查看次数
在 Chrome 中具有 100% 高度溢出主体的 Div
我正在尝试按照此处和此处的描述制作 100% 高度 flex 的孩子。在 Firefox 和 IE 中，它按预期显示，但在 chrome 中，它搞砸了。div 正在脱离身体。这是 chrome 遵循规范对 T 恤的另一个副作用还是仍然是一个错误？
编码：
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
border: 1px solid black;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.red-border {
border: 2px solid red;
}
.blue-border {
border: 2px solid blue;
}
.green-border {
border: 2px solid green;
}
</style>
</head>
<body class="red-border" >
<div clsas="blue-border" style="display: …推荐指数
解决办法
查看次数
全高度flexbox,随内容增长
我有一个基本的两列flexbox布局(侧面菜单,标题,主要内容).
我希望我的侧边菜单有一个固定的宽度,但高度增加到整个页面的100%.对于我的主要内容,有一个固定的高度标题和一个动态高度内容窗格,我希望该窗格的背景也填充100%的可用高度.
- 如果屏幕的高度足够高,可以包含所有内容,那么一切都很有效
- 如果屏幕的高度不能包含所有内容(例如:需要滚动),则1)菜单的背景仅下降到原始视口的底部; 2)主要内容的背景较低[但仍然不是全高]因为标题推动它一些.
当主要内容超出可用高度并需要滚动时,背景不会一直延伸到页面
查看黑色,灰色和控制台窗口之间的交叉点...左侧黑色bg是具有静态内容的菜单,右侧灰色bg是具有增长内容的主要内容,第二个两个图像中的底部白色bg是wtf？
- 在加载数据之前,根本不向下滚动
- 在加载数据之前,向下滚动到页面末尾
- 加载数据后,向下滚动到页面末尾
我不知道高度100%附加到html,身体实际上是在做什么,因为删除它们不会改变行为,仍然与下面的截图相同.
请看这里的小提琴
.flex-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.flex-row.flex-fill {
height: 100%;
}
.flex-col {
display: flex;
flex-direction: column;
flex-flow: column;
flex-wrap: nowrap;
justify-content: flex-start;
}
.flex-col.flex-fill {
width: 100%;
}
.flex-right {
margin-left: auto;
}
.menu {
width: 200px;
background-color: blue;
color: $white;
padding: 15px;
height: 100%;
flex-grow: 1;
}
.header {
background-color: red;
padding: 15px;
font-family: italic;
font-size: 1.5em;
}
.main-content …推荐指数
解决办法
查看次数
CSS height 100% 使元素高度超过100%
以下 HTML 很简单，可以满足我的要求。生坯向下伸展以填充窗口。
<body style="margin:0">
<div style="height:100%;display:flex;flex-direction:column">
<div style="background:#d0d0ff">
This is a header
</div>
<div style="background:#d0ffd0;flex-grow:1">
This is the body.
</div>
</div>
</body>
但是，如果我用一些 flex 列替换该正文文本，并且我给它们height:100%是因为我希望它们拉伸到底部，newdiv实际上它的高度会大于其容器的 100% 并导致所有内容滚动。为什么这里的 100% 不是 100%？
<body style="margin:0">
<div style="height:100%;display:flex;flex-direction:column">
<div style="background:#d0d0ff">
This is a header
</div>
<div style="background:#d0ffd0;flex-grow:1">
<!-- The new part -->
<div id='newdiv' style="display:flex;flex-direction:row; height:100%">
<div style="background:#ffd0d0"> Col 1 </div>
<div> Col 2 </div>
</div>
</div>
</div>
</body>
推荐指数
解决办法
查看次数
flex-grow在列布局中不起作用
我试图views-cntnr占用任何未使用的空间views-cntnr和menubardiv.为此,我将flex显示设置为列方向.然后我将flex-grow属性设置views-cntnr为1.似乎没有做任何事情.的jsfiddle
注意:不确定这是否重要,但我有一些嵌套的flex显示.
HTML
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<section class="analysis">
<div class="menubar">
<div class="view-ctrls text-center">
<div class="btn-group" role="group">
<button class="btn btn-default" ng-class="{'active-view': active_views[0]}" ng-click="toggleView(0)">R-Theta</button>
<button class="btn btn-default" ng-class="{'active-view': active_views[1]}" ng-click="toggleView(1)">Cartesian</button>
<button class="btn btn-default" ng-class="{'active-view': active_views[2]}" ng-click="toggleView(2)">Longitudinal</button>
<button class="btn btn-default" ng-class="{'active-view': active_views[3]}" ng-click="">Console</button>
</div>
</div>
</div>
<div id="views-cntnr">
<div class="r1">
<div id="v1" class="view">V1</div>
<div id="v2" class="view">V2</div>
<div id="v3" class="view">V3</div>
</div>
<div class="r2">
<div id="v4" class="view">V4</div> …推荐指数
解决办法
查看次数
Doctype中断了flexbox布局
当我在页面顶部添加声明时,我的flexbox布局将崩溃,当我删除doctype时,它按预期工作.chrome/firefox/ie出现问题.
.grid {
height: 100%;
display: flex;
flex-flow: column nowrap;
flex-grow: 1;
border: 1px solid black;
}
.row {
width: 100%;
display: flex;
flex-flow: row nowrap;
flex-grow: 1;
}
.cell {
flex-grow: 1;
border: 1px solid black;
}<div class="grid">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>https://plnkr.co/edit/jKklf2zeYBjOgTsSQnvr
应该是什么样的:
推荐指数
解决办法
查看次数
带有图像子项的 flex 项目无法正确调整其大小
我发现这篇文章，带有图像子项的 Flex 项目不会从其原始宽度进行调整，我最初认为这是有答案的，但它没有，......当使用设置高度时，部分确实如此。
我想要并期望在这里发生的是图像与文本元素的高度匹配，然后在保持其比例的同时调整其宽度。
这似乎适用于 Chrome，但不适用于 Edge/IE/Firefox。由于我没有 iOS 设备，因此无法测试 Safari，所以如果有人可以分享它如何/是否在那里工作，我将不胜感激。
这不需要是一个flexbox解决方案，尽管我希望有一个 CSS 解决方案，这意味着没有 script。
编辑
给定文本的高度可以是动态的，并且基于其内容，因此预定义200px只是简单地给它一个高度，JSFiddle 演示，设置高度 。
堆栈片段
.container {
display: inline-flex;
}
.img img {
height:100%;
}
.text {
background: lightblue;
}
.text-content {
width: 200px;
}<div class="container">
<div class="img">
<img src="http://placehold.it/160x90">
</div>
<div class="text">
<div class="text-content">
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some …推荐指数
解决办法
查看次数
部分填充时如何强制身体尺寸？
我想建立一个网站,其中有一个固定的标题,一个可变的内容和一个页脚,当页面没有完全填入时,它位于底部.我将使用CSS网格布局.
知道高度时扩展内容元素很容易:
div {
border-width: 1px;
border-style: solid;
}
#container {
width: 200px;
height: 200px;
display: grid;
grid-template-rows: auto 1fr auto;
}<div id="container">
<div>hello </div>
<div>world</div>
<div>three</div>
</div>然后我试图在一个完整的窗口浏览器上重现这个,我不知道如何告诉应用程序" 如果没有足够的内容,高度就是浏览器的大小,否则这就是内容 ".我认为min-height: 100%;适用于那body将是好的 - 但它不是:
body {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr auto;
min-height: 100%;
}
.navbar {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 3;
}
.main {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 2;
}
.toc {
grid-row-start: …推荐指数
解决办法
查看次数
防止CSS网格导致溢出
我有一个 CSS 网格，但我发现网格行并不都适合页面 - 相反，它们会导致溢出。如何调整网格行的大小，以免它们溢出页面？我认为该1fr值应该这样做，但它似乎在我的代码中不起作用。
我已经查看了防止内容扩展网格项目并尝试了那里的建议答案（例如更改grid-template-rows: repeat(5, 1fr)为grid-template-rows: repeat(5, minmax(0, 1fr));但无济于事。
我试过添加height: 100%到网格中，它是容器，但它仍然溢出。
JsFiddle https://jsfiddle.net/4g9b2qkL/
body,
html {
margin: 0;
height: 100%;
}
#container {
display: grid;
grid-template-columns: 1fr 5fr;
height: 100%;
}
#left {
grid-column: 1 / 2;
background: lightblue;
height: 100%;
}
#right {
grid-column: 2 / 3;
height: 100%;
}
#results {
display: grid;
grid-template-rows: repeat(5, 1fr);
height: 100%;
}
img {
max-height: 100%;
max-width: 100%;
} …推荐指数
解决办法
查看次数