相关疑难解决方法(0)
两个div底部div到高度调整与浏览器窗口
我有一个标题div和一个div.我需要在标题div下面的div根据浏览器窗口大小的高度进行调整.
在CSS中,当我添加高度:100%时,它会在页面的侧面创建一个滚动条.当我调整宽度的百分比时,页面底部的间距会不断变化,因为它是以百分比形式完成的.
我希望标题下方的div始终根据窗口大小调整,底部没有间距.
我该怎么做呢？
这是小提琴
JS Fiddle 我不知道为什么但是在JSFiddle中底部div没有扩展高度:100%
这是代码:HTML
<div class = "main">
Header
</div>
<div class="left">
Bottom Div
</div>
CSS
.main {
width:100%;
height:60px;
border: solid;
}
.left {
height: 100%;
width: 300px;
border:solid;
}
推荐指数
解决办法
查看次数
next.js 中的 div 高度不是 100%
我在 next.js 中样式化页面时遇到问题。我想要全高页面。
因此，我在 body 和 html 标签中设置了 height 属性，没关系，我有 body 和 html 标签的全高（在开发工具中证明），但是虽然我将 #__next height 设置为 100%，但我无法实现全高它。如果我应用其他测量值，如 px 或 vh，它会受到影响。
布局文件
html {
height: 100%;
font-size: 16px;
}
body {
min-height: 100%;
font-family: @text-font-family;
direction: rtl !important;
text-align: start !important;
}
#__next {
height: 100%; // or min-height
}
推荐指数
解决办法
查看次数
Firefox 和 Chrome 中 Flexbox 的不同实现
以下代码在 Firefox 中按预期工作，但在 Chrome 中，图像变得比 flex 容器大得多。
.r {
width: 100%;
height: auto;
min-width: unset;
max-width: 100%;
}
.container {
display: flex;
width: 600px;
}<div class="container">
<img src="https://via.placeholder.com/1000x500" class="r" >
<img src="https://via.placeholder.com/1000x500" class="r" >
<img src="https://via.placeholder.com/1000x500" class="r" >
<img src="https://via.placeholder.com/1000x500" class="r" >
</div>火狐：
铬：
推荐指数
解决办法
查看次数
CSS Grid 将高度和宽度拉伸到容器
我无法让 CSS 网格在高度和宽度上拉伸到其父级尺寸。当设置为 100% 时，宽度会很好地拉伸，但高度会保持其初始大小？我不确定高度尺寸是在哪里计算的。
当将所有行的 grid-template-rows 设置为 25% 时，我认为这会给我所需的 100% 高度，但它不起作用。
body {
margin: 10px;
background-color: red;
height: 100%;
}
.wrapper {
display: grid;
grid-gap: 1px;
background-color: #fff;
color: #444;
grid-template-rows: 25% 25% 25% 25%;
grid-template-columns: auto auto auto auto;
grid-template-areas:
"a b c d"
"e f f g"
"h f f i"
"j k l m";
height: 100%;
width: 100%;
}
.box {
background-color: #444;
color: #fff;
padding: 20px;
font-size: 150%;
}
.a {
grid-area: a;
} …推荐指数
解决办法
查看次数
为什么h-100不起作用？
我有以下布局:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<title>Bootstrap</title>
</head>
<body>
<div class="container bg-danger h-100">
<div class="bg-warning border p-1">Exotic</div>
<div class="bg-warning border p-1">Grooming</div>
<div class="bg-warning border p-1">Health</div>
<div class="bg-warning border p-1">Nutrition</div>
<div class="bg-warning border p-1">Pests</div>
<div class="bg-warning border p-1">Vaccinations</div>
</div><!-- container -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>问题是,为什么div容器不是100%的高度？
谢谢
推荐指数
解决办法
查看次数
Flex-grow 不适用于列方向
我正在尝试学习 flexbox 布局。我看到一个教程谈到了 flex-grow 和 flex-shrink 类，并且本课程中提供的所有示例都适用于 flex-direction: row。
我尝试将它们应用到flex-direction: column，但它不能如我所愿。我用谷歌搜索了它，但是当方向设置为一列时，我没有找到合适的答案来增长弹性项目。
我的代码如下。任何人都可以修复我的 CSS 以在列方向上进行 flex-grow/shrink 工作吗？
html,
body {
padding: 0;
margin: 0;
font-family: arial, sans-serif;
}
.flex-container {
display: flex;
border:solid 4px #000;
flex-direction: column;
height: 100%;
}
.flex-item {
color: #eee;
font-size: 1.2em;
padding: 1em;
text-align: center;
justify-content: center;
flex-grow: 1;
}
.flex-item:nth-child(1) {
background-color: #A62E5C;
flex-grow: 3;
}
.flex-item:nth-child(2) {
background-color: #9BC850;
}
.flex-item:nth-child(3) {
background-color: #675BA7;
}
.flex-item:nth-child(4) {
background-color: #620542;
}<!DOCTYPE html> …推荐指数
解决办法
查看次数
表格单元格内的 CSS 100% 高度弯曲
我有一个包含多个单元格的表格，没有任何有关单元格高度的信息，但我希望其中一个单元格（这是一个 Flexbox 容器）的内容高度为单元格高度的 100%：
<table border="1">
<tr>
<td>
<div style="height: 152px">some content</div>
</td>
<td style="vertical-align: top">
<div style="display: flex; flex-wrap: wrap;">
<div style="height: 100%; min-height: 100%; flex: 1; background: red">
This should take 100% height
</div>
</div>
</td>
</tr>
</table>
- 正在寻找 Flexbox 解决方案，请不要将其更改为基于网格的。
- 我不想在 中设置背景颜色，在示例
<td>中设置红色背景是有原因的。<div>
推荐指数
解决办法
查看次数
CSS Grid 的高度大于其容器 div
我正在尝试制作一个网格，但网格总是溢出它内部的 div。太简单了，我不明白问题是什么。列 div 有背景颜色，因此您可以看到它的位置，但您也可以在元素检查器中看到它。
我尝试了多种解决方案并在网上查看，但找不到解决方案。这是我尝试过的方法以及为什么它不起作用：
height:100%在网格或列类的底部添加了两个空网格单元overflow:auto在列类上制作了一个滚动条在底部创建一个
<br>withclear:both没有做任何事情
.column {
margin-top: 3%;
margin-left: 20%;
margin-right: 20%;
background-color: rgba(200, 0, 0, 0.1);
}
.grid {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(450px, 1fr));
grid-auto-rows: (0px, 1fr);
grid-gap: 2%;
}
.plum {
/* background-color: plum; */
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.1);
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, …推荐指数
解决办法
查看次数
高度100%高度,内嵌显示
我需要有2列divs.
右列将具有随机内容,其可具有1行或100行.
我想在没有javascript的情况下跟踪右列的高度.
我在尝试这个:
<div>
<div style="display:inline-block; width:30%; vertical-align:top; height:100%; background:#FF0000;">
</div>
<div style="display:inline-block; width:30%; vertical-align:top;">
<div>CONTENT</div>
<div>CONTENT</div>
<div>CONTENT</div>
<div>CONTENT</div>
<div>CONTENT</div>
<div>CONTENT</div>
<div>CONTENT</div>
<div>CONTENT</div>
<div>CONTENT</div>
<div>CONTENT</div>
<div>CONTENT</div>
<div>CONTENT</div>
<div>CONTENT</div>
<div>CONTENT</div>
<div>CONTENT</div>
<div>CONTENT</div>
<div>CONTENT</div>
<div>CONTENT</div>
<div>CONTENT</div>
<div>CONTENT</div>
<div>CONTENT</div>
<div>CONTENT</div>
</div>
</div>
问题是左列总是高度为0px,它应该显示一个与右列相同大小的红色列.
那么如何使用div做到这一点？
编辑
Rick Hitchcock的回答非常好,但不适用于Firefox.还有其他建议吗？
推荐指数
解决办法
查看次数
firefox css max-width和max-height在max-height div中
我有一个最大高度的div和里面的图像,应该使用max-width:100%和max-height:100%.在chrome中,这可行,但firefox仅使用max-width并忽略max-heigth.
div#overlaycontent{
position:relative;
overflow:hidden;
height:100%;
overflow-y:auto;
}
div#pic{
overflow:hidden;
position:relative;
box-sizing:border-box;
float:right;
width: -moz-calc(100% - 250px);
width: -webkit-calc(100% - 250px);
width: -o-calc(100% - 250px);
width: calc(100% - 250px);
max-height:90%;
}
img#zoompic{
max-width:100%;
max-height:100%;
display:block;
}
我如何实现firefox将同时使用？最大宽度和最大高度？
推荐指数
解决办法
查看次数
如何将div扩展到整个页面？
我正在尝试为我的React应用程序中的页面设置背景颜色。我想将背景色设置为扩展到整个页面的长度和宽度，但是我不能这样做，对于超出范围的表格或表格，我将高度/宽度或最小高度/最小宽度设置为100％，我得到的结果是内容较大，但内容较小时，我得到以下信息：
我要整个页面都变成蓝色。
这是我的css文件
.body
{
margin:0px 0px 0px 0px;
background-color:#4086ef;
padding:10px;
height:100%;
width:100%;
}
如果将高度设置为100vh，则会得到不想要的结果，但是内容超出页面范围。
（内容呈现是动态的，所以我不知道什么时候内容会超出范围，什么时候不会超出范围）。
编辑： 当我压缩窗口时，表格不会挤压，溢出的部分也不会跟随背景颜色，但是即使滚动时高度也不会跟随背景颜色。
推荐指数
解决办法
查看次数
填补剩余的窗户高度
我知道这个问题之前已被问过多次,但我似乎没有把我的榜样弄好.如何让紫色div填充窗口的剩余高度？
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-flow: column;
height: 100%;
}
.topbox {
background-color: red;
flex: 0 1 40px;
}
.bottombox {
background-color: purple;
flex: 1 1 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="topbox"></div>
<div class="bottombox"></div>
</div>
</body>
</html>推荐指数
解决办法
查看次数
将“textarea”高度保持为“100%”不起作用
我在左列中保留了一些输入元素，在右列中只保留了textarea，我试图将高度添加到100%等于左列。但由于某种原因它不起作用。
.popup {
border: 1px solid red;
background: rgba(000, 000, 000, 0.4);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
form,
fieldset {
padding: 0;
margin: 0;
border: 0;
}
form {
display: flex;
flex-wrap: wrap;
border: 1px dotted gray;
width: 25rem;
}
fieldset {
width: 50%;
background: #333;
padding: 0.5em;
margin: 0;
box-sizing: border-box;
}
form label {
display: block;
width: 100%;
margin-bottom: 1rem;
}
form …推荐指数
解决办法
查看次数