相关疑难解决方法(0)
如何将垂直滚动条应用于百分比高度的div？
我遇到过类似性质的无数问题,但我的情况有点不同; 我的外容器高度为100%而不是固定高度.
我div在容器里面有一堆s.它们溢出,我想有一个滚动条允许滚动.
这正是我想要实现的目标:http://jsfiddle.net/jcjw2jmo/
除此之外,我发布的链接有一个固定的height: 200px;.我希望有一个百分比高度.
我试过设定一个百分比height而max-height没有运气.这是我的进步:http://jsfiddle.net/k52eh0xr/
如何让两个小提琴具有相同的行为,而不是使用百分比？
非常感谢
PS.我知道这可以使用Javascript/jQuery完成,但我正在寻找一个只有CSS的解决方案
推荐指数
解决办法
查看次数
Flexbox将内部元素的高度设置为0
我有一个flexbox的问题.当我设置段落的高度,并设置其overflow来hidden,该款消失Flexbox的div.
这是小提琴:https: //jsfiddle.net/Slit/0yy3q8bL/
代码:
<div class="N">
<p>Lorem ipsum</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in …推荐指数
解决办法
查看次数
边距底部不在flexbox中工作
我有一个问题,我有一个flexbox,但我并不希望每个元素根据给定的属性间隔,所以我想玩边距.
我在框的顶部有一个标题,但我希望它与其余元素之间的间距.
所以我希望将我的p元素列表组合在一起但距离标题更远.
但是,当我这样做margin-bottom时没有效果(当我增加或减少margin-bottom任何变化时).
我最初是以百分比形式进行的,并将其更改为像素,但这似乎也不是问题.
在片段中我看起来没什么问题但是在更大的浏览器上,标题和p元素之间几乎没有任何空间是问题.
.container {
display: flex;
position: relative;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
min-height: 70vh;
width: 70%;
margin: 5% auto 8% auto;
background-color: white;
}
.container p {
margin-bottom: 2%;
}
.container h2 {
color: orange;
font-size: 34px;
}
.middle p:first-child {
margin-top: 8%;
}
.bspace {
margin-bottom: 50px;
}
.box h2 {
color: orange;
text-align: center;
}
.left {
display: flex;
flex-flow: row wrap;
align-items: center; …推荐指数
解决办法
查看次数
Flex 项目在 Safari 中没有高度
我正在使用 Flexbox 创建一个复杂的网格布局（我需要支持的浏览器不支持 CSS 网格）并且我的布局在 Chrome 和 Firefox 中完全按预期工作，但是在 Safari 上，我的大多数 flex-items 有 0高度并且显示不正确。
我创建了一个 CodePen，所以演示了我的代码在哪里（CSS 的道歉，必须从我的项目输出中复制和粘贴） https://s.codepen.io/glennflanagan82/debug/NgPXJR/LQkExPgxmyxA
如果您在Chrome/Firefox上访问上面的链接，您应该会看到在磁贴上具有悬停功能的网格布局，但在Safari 上没有任何图像显示，也没有任何文本。我已经确定这是 Safari 将grid-tile__link元素设置为0 高度，但我不明白为什么。
我完全难倒这个所以任何帮助将不胜感激。
推荐指数
解决办法
查看次数
IE和Edge中不明原因的网格行高
我已经编辑了CodePen示例,在中心div上添加了一些内容div,所有容器div都显示高度,显然不起作用请看这里:
https://codepen.io/anon/pen/OEBxNr
这些线似乎导致下面的差距:
.container {
...
-ms-grid-rows: 1fr 1fr 1fr;
}
.top {
...
height 8.4rem;
}
但我仍然留下第二个问题,可以在上面的CodePen中看到.
我有一个应用程序容器,其中包含顶部的导航,中间的页面和底部的页脚.我的布局在除IE和Edge之外的所有浏览器中都能正常工作.
下面的代码在第二行和第一行之间创建了一个间隙.第二个问题是页面的大小远远超出任何内容.
body, html {
height: 100%;
}
.container {
background:cyan;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: minmax(auto, auto);
display: -ms-grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-ms-grid-rows: 1fr 1fr 1fr;
height: 100%;
}
.top {
background: yellow;
height: 8.4rem;
position: relative;
z-index: 99;
grid-column: 1 / span 12;
grid-row: 1;
background: pink;
-ms-grid-column: 1; …推荐指数
解决办法
查看次数
为什么Safari中CSS网格行高不同？
我使用CSS Grid布局了困难的网格布局，其中网格项目的高度和宽度都不同。网格行1fr的高度设置为与网格高度成比例。某些网格项目具有grid-row: span 2或grid-row: span 3。
网格元素绝对位于包装纸的内部，并带有填充物，以保持长宽比。
在-ms-前缀的帮助下，这一切在Chrome和Firefox甚至IE中都可以完美运行。
在Safari中，情况有所不同：
但是，在Safari中，网格行的计算方式似乎并不相同-Safari浏览器中的行高比任何其他浏览器都长很多，短得多，这破坏了布局。为什么是这样？
从栅格元素删除绝对位置不会更改行高。但是，似乎放在height: 0网格包装上的行为会使行高在Safari中的行为与在Chrome和Firefox中的行为相同。这是什么原因呢？
码：
Codepen：https：//codepen.io/katrina-isabelle/pen/rRqvXq
.grid-wrapper {
position: relative;
padding-bottom: 60%;
}
.grid {
display: grid;
grid-gap: 2px;
grid-template-columns: 29% 21% 21% 29%;
grid-auto-rows: 1fr;
position: absolute;
width: 100%;
height: 100%;
}
.grid-item {
width: 100%;
color: #ccc;
background: #ccc;
}
.grid-item--1 {
grid-row: span 2;
}
.grid-item--2 {
grid-row: span 3;
}
.grid-item--3 {
grid-row: span 2;
}
.grid-item--4 { …推荐指数
解决办法
查看次数
Chrome中的Flexbox容器不会达到100%的高度
另一个Flex容器内的Flexbox列容器在Chrome中不会达到100%的高度,但在Firefox和Edge中都可以.
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.inside-container {
display: flex;
flex-direction: column;
height: 100%;
}
}
推荐指数
解决办法
查看次数
只滚动一个部分，而不是整个页面
我正在处理一个项目，其中一个部分通过从数据库请求数据来填充元素，因此其中的元素数量非常可变。
棘手的部分是我们的设计基于不必在页面上滚动的想法，而是在必要时滚动部分。我认为overflow在这些部分使用就足够了，但它并没有给我预期的结果。
我尝试了该overflow属性的所有变体，scroll显示了一个滚动条，但它似乎被冻结了。
如何section-one在不使页面的其余部分可滚动的情况下使其自身可滚动？
我创建了一个带有虚拟版本的代码笔来演示这个问题：http : //codepen.io/leofontes/pen/aNaBox
body {
overflow: hidden;
}
main {
margin: 0;
width: 100%;
height: 100%;
}
.section-one {
background-color: #FF0000;
float: left;
min-height: 1400px;
overflow: visible;
width: 15%;
}
.section-two {
background-color: #00FF00;
float: left;
min-height: 1400px;
width: 70%;
}
.section-three {
background-color: #0000FF;
min-height: 1400px;
float: left;
width: 15%;
}<main>
<section class="section-one">
<p>this is section one</p>
<p>this is section one</p>
<p>this is section one</p> …推荐指数
解决办法
查看次数
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 …推荐指数
解决办法
查看次数