Question

This question is WHY DOES BLAZOR work differently. NOT how to make an item 100% tall.

EDUPATATE: same cs 手工编码成 HTML 文件,按需要工作。 Blazor 中的 same cs没有。

我有一个测试 HTML 页面显示 div 完全高度。

但当应用到火衣时, css 无效。我找不到任何文件来解释这种行为。

它看起来像calc( 100%) 在火焰中不起作用。

<html>
    <head>
        <style>
        body {
            color: rgb(170, 170, 170);
            background-color: rgb(0, 0, 0);
            font-family: Georgia,  Times New Roman , Times, serif;
        }
        .container {
            height: calc(100%);
            background-color: red;
            margin: 0;
            padding: 0;
        }
        </style>
    </head>
    <body>
        <div class="container">container
        </div>
    </body>
</html>

Hand Coded HTML

主拉尤特. razor

@inherits LayoutComponentBase

<div class="container">container
</div>

应用( a.cs)

body {
    color: rgb(170, 170, 170);
    background-color: rgb(0, 0, 0);
    font-family: Georgia,  Times New Roman , Times, serif;
}

.container {
    height: calc(100%);
    background-color: red;
    margin: 0;
    padding: 0;
}

Blazor 应用程序

Answer 1

在 Blazor 中, 组件在由 Blazor 框架动态生成的一系列嵌套的 < code@ lt; div> 元素中生成。这可能会引起 CSS 的问题不会自动与视图端的全高度相适应。

您需要将 html 和 body 元素的高度明确设定为 100__/code>/ /code>,以确保容器 div 能够达到全高度。


html,body {
    height: 100vh;
    color: rgb(170, 170, 170);
    background-color: rgb(0, 0, 0);
    font-family: Georgia,  Times New Roman , Times, serif;
}

.container {
    height: calc(100%);
    background-color: red;
    margin: 0;
    padding: 0;
}

如果您也需要宽度为全宽, 您需要添加  max- width: 100%;  :
.container {
    max-width:100%;
    height: calc(100%);
    background-color: red;
    margin: 0;
    padding: 0;
}

友情链接