Блог

Похоже, что html-элемент занимает всю страницу, в теле по какой-то причине есть небольшой пробел вверху, но мой div все равно не займет оставшееся место.

Вот 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%;
}
 

Я пробовал делать минимальную ширину на всем, но это не меняется.

Если вы хотите, чтобы historySheet имел ширину 100%, вам нужно удалить максимальную ширину из .historySheet