Как заполнить заполнитель тела в asp.net Core MVC? - PullRequest
Новая
       10

Как заполнить заполнитель тела в asp.net Core MVC?

0 голосов
/ 21 октября 2019

Из документации я узнал, что метод RenderBody возвращает представления внутри заполнителя макета, как показано на этой схеме:

enter image description here

однако, практически не так, как ожидалось, я создал макет с навигационной панелью и нижним колонтитулом, и я добавил представление, которое содержит div, это то, что он возвращаетпромежуток между моим взглядом и нижним колонтитулом:

enter image description here

Итак, как заполнить этот пробел? я пытался дать максимальный рост моему div, но это не сработало! это код моего взгляда: 

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

<div  style="background-color:white;width:970px;height:100%; border:11px solid black">
   <img src="~/images/decoupage/header-img.png" />
   <h3 style="color:blue">Qui somme nous ?</h3>

   <p style="background-color:white">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.

  </p>
   <img src="~/images/decoupage/img1.png" style="padding-left:60px;padding-bottom:50px" />

  </div>

1 Ответ

0 голосов
/ 21 октября 2019

Решено, решение было:

1) сделать минимальную высоту тела равной 100vh (чтобы она заполняла экран)

2) использовать flexbox на теле: 

 <body class="bg-secondary" style="margin-bottom:0; min-height:100vh; display:flex;flex-direction:column">

и выберите направление flex, равное column

3) используйте flexbox на родительском элементе div основной секции и установите flex в 1, чтобы он заполнилпробел в теле:

4) используйте flexbox в основной секции и установите flex в 1: 

<div class="container " style="min-height:100%; padding-left:120px;flex:1;display:flex;flex-direction:column;">
    <partial name="_CookieConsentPartial" />
    <main role="main"  style="flex:1;display:flex;flex-direction:column;">
        @RenderBody()
    </main>
</div>

5) наконец установите flex в 1 в дочерней части основной секции (вид): 

  main > div {
        flex:1;  
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...