Как сделать div 100% с верхним и верхним колонтитулом - PullRequest
Новая
       3

Как сделать div 100% с верхним и верхним колонтитулом

0 голосов
/ 27 февраля 2020

У меня проблема с тем, что я не могу заставить мой div содержимого занимать все пространство области содержимого.

У меня есть фиксированный нижний колонтитул и заголовок stati c. Div содержимого на самом деле находится внутри div из директивы RenderBody в ASP. Net Core MVC.

Вот как выглядит пара страниц с нижним колонтитулом внизу:

enter image description here

enter image description here

Так что я на самом деле не против того, что синий контент div не сводится к дно. Я думаю, что могу взять или уйти.

Но затем я создал эту страницу с большим изображением в div содержимого:

enter image description here

В этом последнем пи c вы можете видеть, что изображение входит в нижний колонтитул и увеличивает высоту элемента нижнего колонтитула от его первоначальной высоты в 60 пикселей.

Вот моя таблица стилей: 

html, body {
height: 100%;
}

.footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space:nowrap;
    line-height: 60px;
}

.content {
    background-color: cornflowerblue /*aliceblue*/;
    border: 1px solid black;
    padding:10px;
}

.title {
    /*background-color: cornflowerblue;*/
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

/* anchor styles */
.nav-link, .dropdown-item {
    color: blue !important;
}
.nav-link:hover, .dropdown-item:hover {
    color: darkgreen !important;
    background-color:aliceblue;
}

.green-header-nav{
    color: black;
}
.green-header-nav:hover {
    color: black;
}

.facebook-anchor {
    color: #4267B2
}

.facebook-anchor:hover {
    color: #4267B2
}   
/* end anchor styles */

Вот моя страница макета:

image

Вот страница контента с синим фоном для "Об авторе": 

@{
    ViewData["Title"] = "AboutTheFounder";
}

<h1 class="title">About The Founder</h1>

<div id="content_div" class="content">
    <b>Gemma Herbertson</b>

    <p></p>
    Gemma has received training from all different parts of the world to include:

    <ul>
        <li>Institute of Neuro-Physiological Psychology (UK)</li>
        <li>Rhythmic Movement Therapy, JIAS (Denmark)</li>
        <li>Family Hope Centre (USA)</li>
        <li>Carrick Institute (USA)</li>
        <li>Kharrazian Institute (USA)</li>
        <li>Gillespie Approach (USA)</li>
        <li>The Neuro Science Academy (Australia)</li>
    </ul>

    Her approach is to work from the <u>bottom-up</u>:
    getting the brain to a healthy state
    (well-fuelled with nutrients and oxygen),
    and then providing individual neuroplasticity exercises
    for optimum effect.
</div>

Вот страница с изображением на это в области содержимого. Страница называется «BrainMap». Этот поднимает вопрос для меня. Я думаю, что если на какой-либо странице будет слишком много контента, я столкнусь с этой проблемой. 

@{
    ViewData["Title"] = "BrainMap";
}

<h1>BrainMap</h1>

<div id="content_div" class="content">
    <img src="~/Images/brain_map.jpg" class="center" />
</div>

Не знаю, почему я пошел по пути цветного фона на фоне контента, но я действительно хочу его сейчас, я думаю, это выглядит хорошо.

Ответы [ 2 ]

0 голосов
/ 27 февраля 2020 

html {
    height: 100%;
}

body {
    position: relative;
    margin: 0;
    padding-bottom: 60px;
    min-height: 100%;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
}

.content {
    background-color: cornflowerblue /*aliceblue*/;
    border: 1px solid black;
    padding: 10px;
    height: calc(100vh - 260px);
    /*you can change 260px accordingly to your needs*/
}

...

Вот результат этой демонстрации:

enter image description here

0 голосов
/ 27 февраля 2020

Вы можете попробовать использовать cal c в CSS: например,

, если ваш header height = 100px и footer = 80px fixed, тогда вы можете установить content height = calc(100% - 180px)

См. : https://www.w3schools.com/cssref/func_calc.asp

...