时间戳

首页 > 解决方案 > 将 html、body、.App 和 #root 设置为 100% 高度后，Div 不会占用剩余空间

css - 将 html、body、.App 和 #root 设置为 100% 高度后，Div 不会占用剩余空间

问题描述

看起来 html 元素占据了整个页面，由于某种原因，body 顶部有一点空隙，但我的 div 仍然不会占用剩余的空间。

这是浏览器中的 html 树

HTML 树

应用程序.css：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: nunito;
}

html,
body,
#root,
.App {
    height: 100%;
    width: 100%;
}

HistorySheet.jsx

if (!loading) {
    return (
        <div className="historySheet">
            <Searchbar
                location={location}
                changeLocation={changeLocation}
                weatherData={weatherData}
            />
            <div className="backdrop">
                <div className="headers">
                    <p>Date</p>
                    <p>Avg</p>
                    <p>High</p>
                    <p>Low</p>
                    <p>Phase</p>
                </div>
                {results()}
                <img onClick={addResults} src={expand} alt="expand icon" />
            </div>
        </div>
    );
} else {
    return <p>Loading...</p>;
}

HistorySheet.css

.historySheet {
    max-width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    height: 100%;
}

.backdrop {
    width: 100vw;
    background: #468faf;
    padding: 1.5rem 17rem;
}

.headers {
    width: 100%;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    text-align: center;
    color: white;
    font-weight: 300;
}

.results {
    height: 100%;
}

我试过在所有东西上做 min-width ，但它没有改变。

标签： css

解决方案

如果您希望 historySheet 具有 100% 的宽度，那么您需要从 .historySheet中删除max-width

推荐阅读