CSS - height:calc(100% - Nem)在flex中不起作用
CSS - height:calc(100% - Nem)在flex中不起作用是因为在flex布局中，元素的高度由flex容器的属性和子元素的属性共同决定。使用calc()函数计算高度时，需要注意以下几点：
- flex容器的属性：flex容器的属性包括flex-direction、justify-content、align-items等，这些属性会影响子元素的布局和尺寸。如果flex容器的属性与calc()函数计算的高度冲突，可能会导致calc()函数不起作用。
- 子元素的属性：子元素的属性包括flex-grow、flex-shrink、flex-basis等，这些属性会影响子元素的尺寸。如果子元素的属性与calc()函数计算的高度冲突，可能会导致calc()函数不起作用。
- 其他因素：除了flex容器和子元素的属性外，还有其他因素可能影响calc()函数的计算结果，例如父元素的高度、浏览器的兼容性等。
解决这个问题的方法有以下几种：
- 调整flex容器的属性：根据具体情况，调整flex容器的属性，使其与calc()函数计算的高度兼容。例如，可以尝试修改flex-direction、justify-content、align-items等属性，或者使用其他布局方式替代flex布局。
- 调整子元素的属性：根据具体情况，调整子元素的属性，使其与calc()函数计算的高度兼容。例如，可以尝试修改flex-grow、flex-shrink、flex-basis等属性，或者使用其他方式设置子元素的高度。
- 使用其他方式计算高度：如果calc()函数在flex布局中无法正常工作，可以尝试使用其他方式计算高度。例如，可以使用JavaScript动态计算高度，或者使用其他CSS属性和单位设置高度。
需要注意的是，以上解决方法仅供参考，具体应根据实际情况进行调整。另外，腾讯云提供了一系列云计算相关产品，可以根据具体需求选择适合的产品。具体产品介绍和链接地址请参考腾讯云官方网站。
相关·内容
4回答
我可以在对象文本中做一些字符串添加吗？
如果我做height: 'calc(100% - ' + String(this.padding) + 'px * 2)'，Chrome会给我以下错误信息。
ProjectContainer.js:15未定义TypeError:无法读取未定义的属性“填充”
var styles = {
root: {
display: 'flex',
flexWrap: 'wrap',
textAlign: 'left',
浏览 10提问于2016-07-09得票数 1
回答已采纳
1回答
我有一个有几个物品的街区。当我单击菜单项时，它将高亮显示并扩展到窗口的左边框。
我在绝对定位元素的帮助下这样做，并将宽度设置为1000 of，但此选项不起作用。在任何分辨率下，这个红色的条都应该靠在窗口的边缘上。
html
<div class="flex-menu-area">
<div class="container">
<div class="flex-menu">
<div class="left
浏览 4提问于2017-10-18得票数 0
回答已采纳
css 100%减去在jquery和Chrome devtools中不工作的像素，
下列措施不起作用：
$(".mydiv").css({height: "calc(100%-50px)"});
它在中也不起作用。使用100%响应窗口大小调整。
但它适用于css样式表：
.mydiv {
height: calc(100%-50px);
}
浏览 5提问于2022-05-31得票数 0
回答已采纳
我想用CSS模拟滑块。展示了一个最小的工作示例。
可以使用javascript来设置滑块的left属性，或者，如代码笔示例所示，将CSS变量设置为0到100。
在0%时，滑块应位于其父滑块的左侧。在100%的滑块应该坐平与右边。
父函数是由flex-grow设置宽度的flex子函数，它与另一个flex子节点共享其行。
在下面的图像中，滑块的父值为黄色，滑块本身为teal。一个邻近的柔韧的孩子用橙色表示：
当CSS变量(或Javascript变量)达到100%时，滑块的右侧边缘应与黄色框的右侧边缘齐平，但目前它的移动方式如下：
我想我可以使用这样的方法来计算left
浏览 0提问于2018-10-10得票数 3
回答已采纳
1回答
我想使用纯css来实现文本中的波形动画效果，波形的高度可以被控制<代码>E29</code>，而波形<代码>E 110</code>图像不使用<code>E 211</code>。
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
span {
font-size: 10em;
-webkit-text-fill-color: rgba(0, 0
浏览 3提问于2020-12-18得票数 2
回答已采纳
3回答
我有一个带有页眉/内容/页脚的HTML页面，它使用柔性盒模型并包含<details>标记。我需要让细节内容使用最大的可用高度，这意味着在打开状态时，它的内容应该占据其容器中的所有空间(当然，除了摘要)。
下面是我的HTML/CSS代码()：
HTML：
<div class="wrapper">
<div class="header">Header</div>
<div class="main">
Some text before details
浏览 2提问于2015-01-07得票数 4
回答已采纳
为了创建一个单一的页面应用程序，我正在与flex打交道。我用了两个挠性盒子：
根Flex盒(flex 1) (100%宽度和高度)
Nav杆(55 Bar高度)
App内容(Flex延伸到页面底部)
Flex容器(flex 2) (父级高度100%)
左Nav (240 Nav宽度)
部分内容(Flex延伸到页面的右侧)
据我所知，我的CSS是正确的，然而，我得到的结果是Flex容器(flex 2)继承了它的祖父母的高度，而不是它的父级的高度(通过弹性拉伸获得)。这是非常恼人的，因为我的页面最终溢出，看起来很简陋。
JSFiddle to
浏览 4提问于2016-01-30得票数 2
回答已采纳
3回答
我正在使用flex属性，并试图在IE 10+ @media only screen and (max-width: 960px)上针对div，但我还没有找到实现这一目标的方法。我在CSS代码的末尾使用了这个@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { selector here... }，但这不起作用。
这是我想要做的事情的一个简单代码。
.main {
display: flex;
flex-flow: row wrap;
padding: 10px;
border: 2px sol
浏览 3提问于2018-03-15得票数 0
回答已采纳
1回答
我希望每个牢房都占1/3。我试着用flexbox实现这一点，但是带有css属性"flex:1“的盒子看起来就像它们有”宽度:50%“一样。
小提琴例子：
Html：
<div class="container">
<div class="row">
<div class="cell">
</div>
<div class="cell">
</div>
</div>
</div&
浏览 10提问于2016-11-09得票数 0
回答已采纳
2回答
我想使四视口宽和高度的基础上，而不是在纯CSS相等的框。
宽度必须大于高度，并希望它具有响应性
如下所示：
我这样做：
html, body {
width: 100%;
height: 100%;
}
.container {
padding: 25px;
width: 100%;
height: calc(100vh - 100px);
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
浏览 1提问于2017-02-27得票数 2
我想知道为什么这个不起作用。 #parent {
display: flex !important;
flex-flow: row wrap;
width: 100% !important;
justify-content: flex-start;
}
.item{
flex: 1 !important;
flex-basis: calc(100% / 4);
box-sizing: border-box ;
border: solid 1px #000000;
margin-bottom: 30px !important;
max-width: 24%;
h
浏览 29提问于2020-04-26得票数 0
2回答
当我在页面上向下滚动时，我的容器与页眉重叠，但我希望页眉与容器重叠，因此我将页眉放在固定位置，但它不起作用 下面是我的html代码： <html>
<head>
<meta charset="UTF-8" />
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
&
浏览 15提问于2021-07-21得票数 0
1回答
我有一个固定高度的导航栏，在一个同样有固定高度的div calendar下面，我有另一个div calendar。日历是可滚动的。我希望日历高度的剩余屏幕高度低于control和屏幕底部。这样，窗口是不可滚动的，只有日历是可滚动的。但是，设置height: 100%和flex: 1都不起作用。
这是我将calendar的高度设置为固定高度时的结果，但正如我解释的那样，我希望高度是屏幕尺寸的其余部分。
有什么想法吗？
.navbar {
height: 50px;
background-color: indianred;
}
.window {
display: flex;
浏览 0提问于2018-09-17得票数 0
4回答
我觉得flex是个小问题。我正在尝试获得一个简单的布局(如链接的jsfiddle所示)。但是，当右边的div (颜色为红色)的高度溢出时，元素就会溢出到viewport中，并且只有当它溢出视图端口的高度时才能滚动。
我很确定这是因为我在很多元素中都使用了height: 100%;，但我需要它们尽可能大(以完全填充视口高度)。
我想要的是视口完全被这三个部分填充: nav、左侧栏和右侧内容(见下面的图片)。当正确的内容部分溢出视口时，应该是可滚动的。
所以，得出结论..。这里的问题是，可滚动的内容首先溢出viewport，当div与viewport的高度相同时，它就开始可滚动了。显然
浏览 0提问于2019-04-18得票数 3
回答已采纳
我试图用React和flexbox创建一个计算器，但我的flexbox似乎不能工作。
我试过使用chrome dev工具，它也是一样的。
import React, { Component } from "react";
import './App.css';
import Button from "./components/Button";
class App extends Component {
render() {
return (
<div className="App">
<div classN
浏览 0提问于2019-07-29得票数 2
4回答
我使用的是带有less的vue.js。我正试着用overflow滚动一个div，但是它不工作它仍然像overflow一样:隐藏 Screenshot of the problem. 这是代码 <template>
<div class="chatarea" v-if="currentRoom">
<ChatInput />
<div class="chatbox">
<ChatBit
:message="chats.message
浏览 97提问于2021-08-18得票数 0
2回答
多亏了一个很好的答案和一个极好的，我已经得到了我想要的大部分布局。粘性，固定高度的页眉和页脚，身体在中间和固定的高宽比.
唯一不起作用的是，身体把脚从底部推下来，这样它就不再粘稠了。(运行片段，向下滚动以查看不粘页脚)。
我能够影响这一点的唯一方法是将#parent div的高度限制在80vh上。这最终会在页脚上方留下空间，这取决于vh。
除了将页脚保留在页面上之外，还有其他方法来完成下面的布局吗？
我在上找到了一个相关的类似问题，但遗憾的是，没有得到答案。
* { margin: 0; box-sizing: border-box; }
body {
display: flex;
浏览 5提问于2022-02-16得票数 1
回答已采纳
我正在努力使页面中的一些内容填满所有剩余的屏幕大小。我的页面有一个标题，内容是两个div，都需要可滚动。我尝试了一些解决方案，我想出的最好方法是使用和CSS calc来设置高度。
但是，柔印盒的高度仍然只是内容的高度。大多数其他的答案据说将body和html标签的高度设置为100%。这也不起作用，我检查页面高度没有被继承。所以我怀疑这可能是个问题，但我不知道答案是什么。
我还使用了引导程序，并使用了box-sizing修复程序来解决我在引导过程中遇到的一些问题，这也可能是一个问题。
我的柔性盒CSS：
html,
body {
height: 100%;
/* setting heig
浏览 6提问于2015-06-13得票数 4
回答已采纳
2回答
我试图实现一个响应的布局与：-一个固定的标题宽度100%和高度为50 px-3相等的平方在右边，接管整个空间从顶部到底部的页面。-一个主要内容正在占据页面上剩余的空间
目前，我的代码看起来像这样()，但是我无法根据当前的高度自动设置右边框的宽度，以便显示为方格.有人知道用纯CSS解决这个问题的方法吗？
HTML:
<div id="mainView">
<div id="content">
</div><!-- content -->
浏览 6提问于2014-02-18得票数 1
回答已采纳
我有困难，防止一个柔性盒div下的兄弟姐妹(标题)。我有以下HTML/CSS结构：
HTML:
<div class="application">
<header class="application-header">HEADER</header>
<div class="application-content">
<div class="content">
<div class="content-he
浏览 2提问于2022-03-12得票数 0
回答已采纳
我正在尝试在速记属性flex或flex-basis中使用css varaible。主要的原因是在我的css样式表的顶部有这个带有ohters的变量，以便方便地适应将来可能出现的更改，而不必搜索样式表中要进行的更改的位置。 我试过了： flex: 1 1 var(--menuItemHeight) ; 或者： flex: 1 1 calc((100vh - 70px) / var(--numberOfMenuItems)); 位置：--menuItemHeight: calc(( 100vh - 70px) / 5); 或地点：--numberOfMenuItems: 5; 甚至可以单独声明如
浏览 7提问于2019-10-07得票数 1
我有一个相当复杂的HTML结构，必须迎合多个设备，并且必须具有响应性。我已经包含了基本的HTML和样式，只是作为一个例子。 我有一个屏幕，其中有某些区域-标题，一些表单和一些带有按钮的内容。带有按钮的内容可以动态调整大小以展开项目列表。我需要设置这个项目列表的最大高度，这样它就不会垂直溢出屏幕的底部边缘。 相关的CSS是在#info-panel__list中定义的 #info-panel__list {
height: 100%;
max-height: calc(
100vh
- var(--header-
浏览 70提问于2021-03-28得票数 0
回答已采纳
我想根据文本的高度自动调整图像的高度。
我尝试在我的图像上使用height: auto和width: 100% (这对我来说似乎是最有意义的)，但它不起作用。
我所拥有的
CodePen示例：
* {
padding: 0;
margin: 0;
}
.container {
display: flex;
align-items: flex-start;
border: solid 4px red;
padding: 5px;
}
.text {
width: 50%;
border: solid 4px black;
paddin
浏览 47提问于2021-05-31得票数 0
回答已采纳
2回答
我正试着做一个覆盖整个页面的菜单。到目前为止，它只显示了一行。我希望菜单元素在页面中间，而不是在顶部。
这是一个示例：
和代码CSS
.menu-opener, .menu-opener:hover, .menu-opener.active, .menu-opener-inner, .menu-opener-inner::before, .menu-opener-inner::after, .menu, .menu.active {
-webkit-transition: 250ms all;
transition: 250ms all;
}
.menu-opener {
cur
浏览 2提问于2014-09-02得票数 0
回答已采纳
您好，我在我的flexbox中有以下结构 页眉主页脚 在我的main中，我有一个容器来集中内容，但当我使用较小的分辨率时，它是有问题的，如照片所示： 📷 代码： export default function App() {
return (
<div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
<div style={{ flex: "none", background: "
浏览 11提问于2020-01-23得票数 0
回答已采纳
3回答
这是一个。下面是
<div class="overflow">
<div class="block">
<div class="header">
This is green header
</div>
<div class="content">
this is a lot of content<br> this is a lot of content<br> this is a lot of co
浏览 3提问于2017-02-17得票数 1
我无法从我能找到的任何解释中确定css变量的值是何时设置的，所以我进行了一个测试 The html <div class="flex">
<div class="item1">
<div class="included"></div>
</div>
<div class="item2">
<div class="included"></div>
浏览 19提问于2021-06-20得票数 2
回答已采纳
我是离设计师最远的，也是为了视觉设计而去看别人的。我购买了一个模板，设计人员在主容器上使用了min-height: 1000px属性，以确保背景颜色始终延伸到底部。
我试图纠正这个问题，因此遇到了以下问题： --它清楚地标识了新的(Ish) css3 flex属性的使用。然而，似乎我现在的结构不允许它的正确使用？还是我走错了路？
CSS：
body {
width: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans',Helvetica, Arial, sans-serif;
color: #66666
浏览 4提问于2015-06-11得票数 0
回答已采纳
1回答
我试图实现0和C按钮的两倍大小的普通按钮和=按钮的高度两倍(更高)的正常按钮的高度。
我试过的-
Div1 -主分区显示挠曲和方向列。
Div2 - Div1内部的输入栏。
Div3 -按钮的全部除数。
Div3 -以行方式包含两个作为flex布局的Div (Div4，Div5)。
Div4 -包含除上一列中的按钮以外的按钮的Div4行。
在Div4中，我能够为我需要两倍宽度的按钮做flex:2。
Div5 --最后一列按钮，但当我将flex:2设置为"=“按钮时，它的高度不会改变。
<!DOCTYPE html>
<html lang="
浏览 9提问于2022-08-11得票数 0
2回答
我试图为侧栏创建高度，为我的管理页面创建主内容，但出于某种原因，它只为顶部创建高度，就在我的标题之后，不适用于右侧、左侧或底部，因此我不能将任何css应用到我的侧栏和主内容。我正在学习本教程 ( 16:00是我想要实现的)。我的代码与他的相同，但由于某些原因仍然不能工作，所以我很困惑。
。
。
我的HTML是：
<div class="admin-wrapper">
<div class="left-sidebar">
</div>
<div class="admin-content"><
浏览 2提问于2020-10-20得票数 1
回答已采纳
1回答
我希望在div中有一个图像(紫色的，见下面的图像)，它的尺寸以%表示，并且图像永远不会从div中出来，而是在需要时调整大小，保持高宽比。
目前，我的代码如下所示，但图像来自div，如您在下面的图片中所看到的。
html {
min-height: 100vh;
position: relative;
}
body {
height: 100vh;
overflow: hidden;
}
#grille {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hid
浏览 0提问于2018-09-26得票数 0
回答已采纳
HTML
<div class="flexContainer">
<div class="booking blue"></div>
<div class="booking green"></div>
<div class="booking purple"></div>
</div>
CSS
.flexContainer {
display: flex;
width: 300px;
background-color
浏览 0提问于2020-08-06得票数 0
2回答
我想用CSS制作下面的锐角形状，我已经尝试了下面的代码，但是它没有给出确切的形状，如何用CSS制作这些锐角呢？
h1{
width:150px;
height:100px;
background-color:#ff5722;
margin:20px auto;
display: flex;
justify-content: center;
align-items: center;
position: relative;
color:white;
z-index:9;
}
h1::befo
浏览 5提问于2022-06-22得票数 1
回答已采纳
我试图创建一个灵活的布局，如下图所示。这是页面在正常屏幕大小上的样子(在调整大小之前)。
页面大小调整将如下所示，侧边栏位于主内容之上。
我所写的代码似乎有效。但是，当屏幕尺寸减小时，如何使侧栏落入主要内容的范围呢？
CSS：
div#container{
display: flex;
flex-direction: column;
}
main{
display: flex;
background-color: #ccc;
flex-wrap: wrap;
浏览 8提问于2021-03-12得票数 0
在css中使一个元素减去另一个元素的高度，而不显示flex。因为flex是一个新事物，在一些浏览器中不支持它，这是令人担忧的。
所以我有两个元素：
<div id="example1">
hello there<br>some text
</div>
<div id="example2">
hi there<br>this is some more text<br>to make this thing more lengthy
</div>
因此，由于#example2中的文本，
浏览 0提问于2021-03-10得票数 0
是否有可能在最后一行溢出而不使用垂直滚动时使包装，就像水平滚动一样？
我的CSS当前如下所示：
.flex-container {
height: calc(100% - 0.125rem);
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
overflow: hidden;
align-items: center;
}
.item {
width: 6.25rem;
height: 6.25rem;
margin: 1px 0 0 1
浏览 2提问于2021-05-30得票数 1
回答已采纳
1回答
我用柔性盒创建了一个网站布局。下面是我前面关于如何做到这一点的问题：
现在，我想修改正确的列(容器H)：而不是像现在这样只需要一个完整的高度可滚动的DIV，我需要三层，一层以上，相同的大小和位置。容器H应该保持在底部，仍然占据所有的高度并且可以滚动。中间的那个(容器I)应该填充页面，但不能滚动。顶部的页面(容器J)应该尽可能高，但不超过页面，如果更高，则可以滚动。
你知道怎么做吗？我试着使容器相对和divs绝对，但它完全打破了我的布局。
CSS：
html, body {
height: 100%;
width: 100%;
}
body {
浏览 3提问于2016-05-17得票数 2
3回答
为什么我的媒体查询不起作用？
、、、、
我用的代码做了一个页面。但我的页面无法正常工作，媒体查询似乎无法正常工作。为什么它们不起作用？CSS lint说有一些问题
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width"> -->
<title>Flex-training</title>
<link
浏览 3提问于2016-04-08得票数 0
我有一个包含几个子元素的父div元素。父div包含在外部容器div中。我希望父div在容器中居中，但问题是父函数使用flex-wrap: wrap包装它的所有子div。
父div按预期在容器中居中：
#container {
width: 500px;
display: flex;
justify-content: center;
background-color: #c0faff;
}
#parent {
display: flex;
flex-wrap: wrap;
}
.child {
background-color: #5bb4bb;
width:
浏览 2提问于2021-06-23得票数 0
回答已采纳
如果我有一个body元素，并且我减小了屏幕尺寸，那么它的比例是1:1。
如果我有一个宽度为50%的body标签。这是1:1的比例。视口的每一个像素的减少都会直接影响元素的宽度。
如果我有两个元素并排。我想让第一个元素(.left)从400px的宽度开始，屏幕宽度为1300px，但在屏幕增加到1920px的过程中，总共增加100px。
第二个元素(.right)将填充剩余的空间，并以屏幕的相应速率+/- .left的当前宽度减少
.right
1300px -> 1920px
400px -> 500px
.left
width:100%
我知道这不起作用，但这是我到目前为止得到的代
浏览 5提问于2021-01-08得票数 1
我创建了以下html元素。
这里，remaining-height类应该是container-div的剩余高度，为100-15=85 px，但由于grand-child-div为200 px，remaining-height div超出了container-div。
如何防止remaining-height div保持container-div的高度，即100 - 15 =85 15。
根据评论，我要增加一个细节。remaining-height将在该div内滚动，因为grand-child-div的高度将比remaining-height高。
<div class="conta
浏览 5提问于2022-11-03得票数 0
回答已采纳
1回答
目前，我需要把一个视频画廊，其中包含一个主视频和多达4个子视频。在这种情况下，我无法更改dom。
我有它与flex的工作与子视频下面的主视频，但我需要有子视频显示在主视频的右侧。子视频的数量可以变化(最多4个)，并且应该缩放到1 1rem间距的主视频的完整高度。我已经尝试使用CSS网格，但我需要支持IE，这被证明是有问题的。
下面是我当前拥有的一个示例：
HTML：
<div class="video-container">
<div class="video"><div class="video-embed"&
浏览 6提问于2018-11-15得票数 1
在不使用列方向的情况下，我试图获得弹性项来填充剩余的垂直空间。没有列似乎是不可能的？
<div class="flex-container">
<div class="flex-item" style="height:100px">100PX</div>
<div class="flex-item stretch-v">
Should stretch vertically
</div>
</div>
CSS
.flex-container
浏览 0提问于2019-01-11得票数 0
我有一个模式，其中包含标签，可能会有很长的内容。 我试图做的是让模式调整内容高度，但当内容超过80%的模式最大高度时，内容部分应该是可滚动的。 目前，它的工作原理是当内容变得太大时滚动。但现在的问题是，无论内容如何，modal__content容器都会保持100%的高度。如果我从modal__content中删除了高度，那么内容滚动将不再起作用。 希望这是有意义的 <div class="modal">
<div class="modal__container">
<div clas
浏览 16提问于2021-03-24得票数 0
我正在使用CSS Flex Box在移动视图上显示我的woocommerce商店中的项目。
在外部框中，我有以下css
@media screen and (max-width: 768px)
#wpv-view-layout-16231-TCPID16485 {
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
padding: 0 10px;
}
项目css如下所示
@media screen and (max-width: 76
浏览 26提问于2020-05-25得票数 0
1回答
我有两个日历并排，一切都看起来很好使用css网格。我现在的问题是，我想简单地在html上复制/粘贴31次，并以某种方式使用javascript填充区域，但只允许每行7个Awesome1和5行填充其容器的整个空间。 有人能建议我怎么解决这个问题吗？我不想用网格做这件事，我想用javascript生成它，并基于此生成:) 7x5个方框(宽x高)，给每个blockCalendarBox动态的宽度和高度？ 致以亲切的问候！ .dashboardContentInnerWrapper {
height: 300px;
background-color:red;
}
.grid-conta
浏览 12提问于2020-03-27得票数 0
在我的angular应用程序中，我希望我的登录表单集中在屏幕上。我应用了必要的CSS样式，一切正常，没有任何垂直滚动条在我的笔记本电脑和台式机上，即中屏幕和大屏幕。当我在手机上查看表单时，会出现垂直滚动条，并且表单不会垂直居中，如下图所示。
登录html表单及其CSS文件为
login.component.html
<div id="divPage">
<div class="wrapper">
<!-- Content of the form -->
</div>
</
浏览 0提问于2020-01-24得票数 0
4回答
我想用屏幕上可用的垂直空间的其余部分垂直地将区段块居中。应该是100 to (肚脐高度)，但我不知道如何在css中实现这一点。
我目前正在设置区段高度:100 to，但这会导致滚动条出现
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-between;
border: 1px solid red
}
section {
display: flex;
flex-direction:
浏览 7提问于2022-09-09得票数 0
2回答
我的HTML布局如下所示：
body //display: flex
nav //flex-basis: 85px
main //flex-grow: 1
footer //flex-basis: 50px
在桌面视图中，页脚位于底部:但如果内容后来增长，页脚不再位于底部，页面底部和页脚末尾之间就会出现空白。
在手机上，您可以立即看到差距。
我正在使用display: flex，并寻找一种方法，以确保页脚始终保持在底部。
她的布局css：
body {
display: flex;
flex-direction: column;
min-height: 100vh
浏览 6提问于2021-03-01得票数 0
3回答
我想实现这个分裂屏幕视频效果的网页，我正在工作。
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initi
浏览 4提问于2016-11-25得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
