bootstrap 4中flex-grow div中的垂直溢出

文章/答案/技术大牛

发布

1回答

javascript、html、css、bootstrap-4

我在html web布局方面是个新手(我否认这一点，我感觉我可能犯了一些新手的错误)，但这让我抓狂，我还没能找到在我的特定情况下有效的解决方案。我正在尝试为未来的桌面应用程序做这样的布局 ? 这是我的代码 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE22mJbHaEWldlvI

浏览 9提问于2019-12-24得票数 1

回答已采纳

2回答

Flexbox溢出滚动条显示在主体上而不是内部元素

html、css、bootstrap-4、flexbox、overflow

问题：我尝试过的：正如在其他几个这样的答案中提到的，我尝试添加min-height: 0;到flex元素/父级。截图

浏览 7提问于2017-08-07得票数 10

回答已采纳

1回答

Flexbox和<header>、<main>和<footer>标记

flexbox

我在一些地方读到，当使用flexbox时，你应该将所有内容放在flexbox的<header>、<main>和<footer>标签中，才能发挥它的魔力。这是真的吗？需要这些标签吗？

浏览 0提问于2015-05-25得票数 0

1回答

引导布局嵌套？

html、css、twitter-bootstrap-3

我对引导和嵌套有困难，这是相当新的。我有一个布局，我试图重新创建，但没有得到正确的结果，在这里看到的。我的代码 <div class="row">

浏览 1提问于2016-12-09得票数 0

回答已采纳

2回答

挠曲箱包装误差

html、css、flexbox

我有两个DIVs，其中一个有固定的高度，另一个应该覆盖页面的其余部分。两者都放在包装器DIV中。现在，如果我第二个DIV的内容溢出，我希望DIV滚动(而不是页面)。我目前的问题是，第二个div不与第一个垂直对齐。100%; border-bottom: $color 0.15em solid; padding-left: 1em; d

浏览 3提问于2016-10-21得票数 1

回答已采纳

1回答

在TailwindCSS中，为什么我的flex-1元素会溢出父元素的高度，即使我在溢出的子元素中使用溢出-y-滚动？

html、tailwind-css

我正在尝试使用HTML和TailwindCSS创建一个页面，其中包含一些静态导航/菜单，旁边还有可滚动的内容。可滚动的内容将定位在页面的右下角，因此静态部分位于页面的左上方。我的尝试:一个带有h屏幕的父div，其中第一个div是固定高度的顶部部分。下面的下一个div应该扩展到页面底部，这就是为什么我使用flex-1来生长它的原因。问题是:一旦可滚动div中的内容超过了一定

浏览 8提问于2022-08-10得票数 0

回答已采纳

4回答

鞋带4-全高度抽屉

css、bootstrap-4

我正在开发一个使用引导程序4的应用程序，另外，我使用的是。我需要这个应用程序占据整个屏幕，并使用抽屉是框架的一部分。我可以成功地让应用程序占据整个屏幕，使用一个柔性盒。Fiddle中的代码如下所示： <nav class="navbar sticky-top banner"> <a class

浏览 1提问于2018-07-18得票数 0

回答已采纳

2回答

挠曲箱定位

html、css、twitter-bootstrap、flexbox

我希望使用Flexbox实现这个结果：使用此代码的结果显示绿色div和位于container中心的标题。 display: flex; align-items: center; ju

浏览 2提问于2017-03-05得票数 2

回答已采纳

2回答

CSS: flex在溢出时扩展，但需要一个scrollarea。

html、css、flexbox

Flex-grow div scrollarea？顶部和底部的div具有固定的高度，例如200px和100px。中间的div应该动态地填补我已经使用flex-grow完成的空白。当中央div被填充并开始溢出时，它会展开，并且页面不再适合视图端口。我希望中央div变成一个可滚动的</

浏览 1提问于2017-07-23得票数 1

回答已采纳

3回答

将滚动应用于flex容器的特定部分

css、tailwind-css

<div class="flex flex-grow h-full w-100"> <div class<div class="projects flex-grow px-4"> <p

浏览 1提问于2020-08-17得票数 6

2回答

CSS Flexbox列溢出

html、css、layout、flexbox、overflow

=“按钮的大小是其他按钮的两倍(垂直)。#^#^#^#.0\x{e76f}=我为左边和右边的“列”创建了一个名为".bottom“的div容器。左边包含行和普通大小的按钮，右边包含"=“按钮。.bottom #control

浏览 7提问于2022-10-07得票数 0

回答已采纳

1回答

响应式柔性盒填充所有浏览器高度

html、css、flexbox、responsive-design

我正在学习柔性盒，我的目标是创建一个由三个项目组成的简单的柔性盒，能够响应不同的设备(智能手机、平板电脑、桌面…)。。项目应该是一个之上的另一个和一起填充所有的浏览器宽度和height.So基本上没有一个滚动。(总之，在最上面的一个项目，在页面底部的一个项目，其余的在中间占据左边的空间)。桌面和智能手机上的宽度部分似乎可以工作。但是，如何填充浏览器的高度，以及字体和框如何适应不同设备的不同高度，对我

浏览 0提问于2021-06-22得票数 0

回答已采纳

1回答

Css flex溢出问题

css、flexbox

我有： display:flex;} flex-grow:1以使.content div与css垂直对齐。内容动态变化，这就是我不能使用position:absolute; margin-top:50%...样式的原因。因为我从来不知道每次更新内容时div的确切高度。但是，在.container宽度变化但高度保持不变的情况下，.content溢出.con

浏览 4提问于2015-01-11得票数 1

回答已采纳

2回答

只在Chrome中滚动html元素

javascript、html、css、google-chrome、browser

如果在Chrome中运行上述代码，就会得到所需的结果.包装这两个部分的内部容器(当浏览器窗口缩小时)将显示一个垂直滚动条。但是，如果您在Edge或Firefox中做同样的事情，浏览器只是在整个页面上显示一个垂直滚动条，而不是在给定的容器元素上显示。;flex-grow:1;height:100vh;"> <div class="header">This is the

浏览 1提问于2018-07-19得票数 0

回答已采纳

1回答

防止子元素扩展父元素: Chrome和Safari的可移植解决方案？

html、css、google-chrome、safari

我有一个包含文本的元素，其中的文本可以很长。我想隐藏溢出文本，我不希望文本增加元素或其父/祖的大小。下面是一个示例：图中显示了Chrome (左)和Safari (右)的并排比较.文本应该是垂直居中的，但是可以看到，Safari文本不是。最后，如果页面高度太小，文本将完全消失。这似乎是由height:0;min-height:100%技巧直接造成的，因为用height:100%替换这些行会使Safari中

浏览 1提问于2021-02-10得票数 0

回答已采纳

1回答

将FontAwesome图标与<h1>对齐

html、bootstrap-4、icons、alignment、html-heading

我刚开始学习Bootstrap，但我很难将我的图标与我的图标对齐。 What it looks like right now..我一直在尝试在容器中修复它，但也使用行、列和几种对齐方法。这是我现在的代码： <div class="container"> <div class="col"> <h1

浏览 14提问于2019-10-16得票数 0

回答已采纳

2回答

Flexbox将边栏缩小到内容高度

html、css、flexbox

当它超过屏幕高度时，侧边栏将继续垂直扩展。<div class="fb-col"> <div class="fb-row">  </div>

浏览 0提问于2018-06-12得票数 1

2回答

将文本居中与图像对齐

html、css

我在div中有一个类为col-md-6的图像，我试图将文本放在图像的正中间。有什么代码可以解决这个问题呢？我找到的唯一可能但不准确的方法就是弄乱填充。

浏览 0提问于2017-04-18得票数 0

3回答

如何使用flex-grow？

css、layout、flexbox、bootstrap-4

在文档和Bootstrap v4 的问题中，我看不到任何支持flex-grow的计划，例如： <div class="flex-grow">I use all the space left <div> I am a small t

浏览 15提问于2017-02-10得票数 41

回答已采纳

1回答

HTML布局-滚动元素不会拉伸

html、css、flexbox

我正在尝试创建一个类似于这样的布局：其中页眉和页脚被钉在窗口上，如果需要空间，蓝色区域会垂直滚动。看起来，用于“左导航”和“内容”的div被裁剪到其父节点的高度，尽管该父节点可以滚动。 height:100%#header, #footer { flex-shrin

浏览 4提问于2016-02-01得票数 6

点击加载更多