【问题标题】:White box at the bottom of a view视图底部的白框
【发布时间】:2018-09-30 22:23:24
【问题描述】:

在我的页面/视图底部,我有一个无法删除的white box。当我检查元素时,该空间中没有元素(甚至没有正文或 html) 我尝试将 body 设置为 height:100%,没有填充、边距等,但没有任何区别。 对不起,如果我提供的代码太少,如果您需要更多,请大声喊叫。

这是我的 CSS:

.header {
border: 0px;
margin: 0px;
padding: 0px; 
padding-bottom: 10px;
background-color: black;
color: white;
display: block;
text-align: center;
}
h1 {
border: 0px;
margin: 0px;
padding: 20px;
}
.container-fluid {
height: auto;
border: 0px;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}

.btn btn-primary {
border: 20px;
}
.card {
align-items: center;
justify-content: center;
}
.card-body {
display: block;
padding: 0px;
}
.card-title > img {
margin-rigth: 5px;
}

.table {
font-size: 20px;
 }

HTML:

 @{
 ViewData["Title"] = "Home Page";
 }

<div class="header">
    <h1>My Health Vision</h1>
    <div class="col-md-3">
        <button type="button" class="btn btn-primary btn-lg btn-block">Add new goal</button>
    </div>
</div>

<div class="container-fluid">
    <div class="card" style="width:400px">
        <div class="card-body">
            <h4 class="card-title"><img src="images/goal-icon.png" width="60" height="60" />My weigth goal</h4>
            <table class="table">
                <tbody>
                    <tr>
                        <th scope="row">Goal weigth</th>
                        <td>85</td>
                    </tr>
                    <tr>
                        <th scope="row">Deadline</th>
                        <td>2018-05-30</td>
                    </tr>
                    <tr>
                        <th scope="row">Current weight </th>
                        <td>90 <button type="button" class="btn btn-primary btn-sm">Update</button></td>
                    </tr>
                    <tr>
                        <th scope="row">Best weigth</th>
                        <td>87</td>
                    </tr>

                </tbody>
            </table>
        </div>
    </div>
</div>

用 HTML 更新。

【问题讨论】:

  • 你能和我们分享一下 HTML 吗?
  • 查看 HTML 会有所帮助。此外,请确保在不使用浏览器插件的情况下进行测试(使用访客会话)。
  • @Goediaz 用 HTML 更新了帖子
  • 我没有安装任何插件

标签: html css asp.net-mvc bootstrap-4


【解决方案1】:

而不是使用:

height: 100%;

用途:

height: 100vh;

【讨论】:

  • 不幸的是什么都没做
  • 预期的结果是什么?黑色背景?因为你的身体没有背景颜色:)
  • Nvm 100vh;修复!我的 .cointainer-fluid 设置为 heigth:auto ,当我将其更改为 100vh 时,它填满了屏幕。谢谢!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-03-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-01-02
相关资源
最近更新 更多