个人中心
gpt4 book ai didi

html - 在 flexbox 元素中获取 100% 高度的 div

转载 作者：太空狗 更新时间：2023-10-29 15:59:34 24 4
gpt4 key购买 nike

我正在尝试使用 flexbox 生成以下布局。

enter image description here

顶部黑条、中间部分和底部黑条都是 flex 元素，它们是 body 标签内包装 div 的子项，如下所示。

<!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">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
    <link href="~/Styles/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Styles/font-awesome.min.css" rel="stylesheet" />
    <link href="~/Styles/ppt_site.css" rel="stylesheet" />
</head>
<body>
    <div class="wrapper">

        <div id="topRow">
        </div>

        <div id="centralRow">

            <div id="sidebarColumn">
            </div>

            <div id="contentColumn">
            </div>

        </div>

        <div id="bottomRow">
        </div>

    </div>

    @Section['customScripts']
    <script src="~/Scripts/siteGlobals.js"></script>

    <script src="~/requireconfig"></script>
    <script data-main="~/scripts/NewTemplatesAppLoader.js" src="~/requirejs"></script>

</body>
</html>

控制这一切的样式表如下

.wrapper, html, body {
    height: 100%;
    margin: 0;
}

.wrapper {
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

#topRow {
    background-color: black;
    color: white;
}

#centralRow {
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

#bottomRow {
    background-color: #333333;
    color: white;
}

#sidebarColumn {
    background-color: #B83B1D;
    color: white;
}

#contentColumn {
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    background-color: #F7F7F7;
    color: black;
    padding: 10px;
    overflow-y: auto;
}

就主要布局而言，这一切都完美无缺，但是如果您查看图像，您会注意到红色边栏是顶部带有黄色边框的区域。

该区域注定是一个 div，它会拉伸(stretch)上面 CSS 中红色区域(侧边栏列)的整个高度，但尽管我可能会尝试，但我无法让它做我需要的事情。

理想情况下，我希望它是一个 div，这是一个 flex 容器，然后我可以将 4 个 flex 元素放入其中，并且每个元素都占用四分之一的可用空间，但是因为带有黄色边框的 div似乎看不到父容器的高度(红色侧边栏，它本身是一个 flex 元素)然后它只会占据其内容周围空间的高度。

我试过将它包裹在更多的 div 中并定位这些 div，我在更多的 div 中包裹了更多的 flexbox ，我尝试了 block 、内联、表格单元格以及我能想到的几乎所有其他东西。

无论我尝试什么，我似乎都无法让黄色边框容器与其父级高度相同。

有什么想法吗？

更新(第二天早上)

所提出的 2 个解决方案确实有效，就其本身而言，它们也像我预期的那样有效。

然而，在我的特殊情况下，它们不起作用。

我正在使用 NancyFX 及其 super 简单的 View 引擎，我正在使用 KnockoutJS 来编写“Web 组件”，这样我就可以重复使用我的作品。

如果我编辑我的“主模板”，并将 div 直接插入标记中，嵌套在 #sidebarColumn 下面，我会根据需要获得 4 个大小相等的 div。

但是，实际需要发生的是以下情况，我的模板如下所示:

<div class="wrapper">

    <div id="topRow">
        @Section['topbarContent']
    </div>

    <div id="centralRow">

        <div id="sidebarColumn">
            @Section['sidebarContent']
        </div>

        <div id="contentColumn">
            @Section['bodyContent']
        </div>

    </div>

    <div id="bottomRow">
        @Section['bottombarContent']
    </div>

</div>

如果我删除“@Section['sidebarContent']”并将 div 直接放入它们中，它们就可以工作。

如果我将 div 直接放在使用模板的“页面”中，如下所示:

@Master['shared/ppt_layout.html']

@Section['topbarContent']
    <toptoolbar></toptoolbar>
@EndSection

@Section['sidebarContent']
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
@EndSection

@Section['bodyContent']
    <h1>Body Content</h1>
    <p class="lead">I am the test page that uses a wide sidebar component</p>
    <p>If you notice however, I also have a top toolbar with title added to me, and a footer bar.</p>
    <p>We all use the same template however....</p>
@EndSection

@Section['bottombarContent']
    <footerbar></footerbar>
@EndSection

@Section['customScripts']
@EndSection

这也行得通，但如果我将标记放在一个剔除组件中，即使只是页面中的直接 div，我也会得到我最初注意到的效果。

因此，出于某种原因，添加内容、使用敲除组件正是导致问题的原因。

即使我尝试在组件内构建一个新的 flex 布局，在垂直方向上什么也做不了，但在水平方向上一切都完美无缺。

例如，页脚栏被分为左右两部分，完全没有问题，但垂直对齐被取消了。

最佳答案

所以，经过几天的折磨，我终于弄清楚了问题所在。

我在我的元素中使用 knockout.js，特别是 knockout 组件，它们之间的障碍导致了问题。

对于那些以前没有使用过 KO 组件的人来说，这是一个非常简单的过程。您构建一个 JS View 模型和一小段 HTML 来提供组件显示界面。

然后你使用:

ko.components.register("myComponent", {
    viewModel: "Components/myComponent.js",
    template: "Components/myComponent.html"
});

ko.applyBindings();

注册您的组件。

一旦组件被注册，你就可以简单地通过放置来使用它

<myComponent></myComponent>

您希望将其添加到网页中的任何位置。

现在一切都很好，但是......当 KO 实例化组件时，它会保留自定义标签。

所以如果你想象你的组件看起来像这样

<div>
    <div>Item...</div>
    <div>Item...</div>
    <div>Item...</div>
    <div>Item...</div>
</div>

你的页面看起来像

<body>
    <div>
        <myComponent></myComponent>
    </div>
</body>

那么最终的输出会是这样

<body>
    <div>
        <myComponent>
            <div>
                <div>Item...</div>
                <div>Item...</div>
                <div>Item...</div>
                <div>Item...</div>
            </div>
        </myComponent>
    </div>
</body>

鉴于上述 CSS 中的规则，我的和两个响应者都以包装器 div 为目标，该规则永远不会匹配目标 div 以在其上启用 flex。

关键(正如我通过反复试验发现的那样)是使用自定义标签名称，例如:

#sidebarColumn > narrowsidebar {
     width: 70px;
     flex: 1;
     display: flex;
     flex-direction: column;
}

然后，从该父级继承进一步的 flex 操作。

然而，它仍然没有解释，为什么当你在组件内部从头开始做一个完整的 flexbox 布局时(即在主网页和/或模板中没有任何 flex 操作)，它仍然有垂直问题对齐，据我所知，KO 对应该导致此行为的 dom 没有做任何事情。

然而，对于我最初的问题，通过自定义标记定位可以让我到达我需要去的地方。

美女

关于html - 在 flexbox 元素中获取 100% 高度的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36553820/

24 4 0
文章推荐： android - Activity 已泄漏 IntentReceiver 错误
文章推荐： asp.net - 将配置设置从 web.config 移至 ServiceConfiguration.cscfg
文章推荐： android - ionic - svg 不出现
文章推荐： html - 在同一行居中和定位元素
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com