Установка высоты изображения до 100vh приводит к перекрытию с другими элементами

Question

Я пытаюсь создать страницу, используя Bootstrap 4, которая имеет верхний и нижний колонтитулы и основной контент. Основное содержимое должно заполнять пространство под заголовком, а нижний колонтитул должен быть ниже этого.

Я попытался сделать это, установив высоту 100vh для основного содержимого, это работает, но когда я вставляю изображение, оно перекрывается нижний колонтитул Куда я иду не так? Почему размер изображения не изменяется?

#content-header {
  background: red;
  color: white;
}

#content-main {
  background: blue;
  color: white;
  height: 100vh;
}

#content-header {
  background: red;
  color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div id="app" class="h-100">
  <div id="content" class="d-flex flex-column">
    <nav id="content-header" class="p-4">
      <div class="navContent d-flex justify-content-between">
        Navbar
      </div>
    </nav>
    <main id="content-main" class="flex-grow-1 p-5">
      Main Content
      <img class="img-fluid" src="https://placeimg.com/1000/1000/any">
    </main>
    <div id="footer" class="p-4">
      Footer Content
    </div>
  </div>
</div>

Answer 1

Вы хотите, чтобы макет весь имел высоту 100%, а не просто #content-main.

Поэтому вы хотите установить min-height:100vh (min-vh-100) на #content. Затем flex-grow-1 позволит main заполнить высоту между nav и footer:

<div id="app">
    <div id="content" class="d-flex flex-column min-vh-100">
        <nav id="content-header" class="p-4">
            <div class="navContent d-flex justify-content-between"> Navbar </div>
        </nav>
        <main id="content-main" class="flex-grow-1 p-5 overflow-auto">
            Main Content
            <img class="img-fluid" src="https://placeimg.com/1000/1000/any">
        </main>
        <div id="footer" class="p-4"> Footer Content </div>
    </div>
</div>

https://codeply.com/p/gnLCSZG9gy

Answer 2

Вы правы. Потому что вы установили высоту основного контента 100vh, но если вы заметили, что у вас размер изображения больше, чем высота экрана. У вас размер экрана будет от 700 до 800 пикселей, но размер изображения составляет 1000 пикселей. Таким образом, ваше изображение накладывается на нижний колонтитул.

Answer 3

добавить min-height insted из height

#content-main {
  background: blue;
  color: white;
  min-height: 100vh;
}

#content-header {
  background: red;
  color: white;
}

#content-main {
  background: blue;
  color: white;
  min-height: 100vh;
}

#content-header {
  background: red;
  color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div id="app" class="h-100">
  <div id="content" class="d-flex flex-column">
    <nav id="content-header" class="p-4">
      <div class="navContent d-flex justify-content-between">
        Navbar
      </div>
    </nav>
    <main id="content-main" class="flex-grow-1 p-5">
      Main Content
      <img class="img-fluid" src="https://placeimg.com/1000/1000/any">
    </main>
    <div id="footer" class="p-4">
      Footer Content
    </div>
  </div>
</div>

Answer 4

Пожалуйста, измените height: 100vh на высоту: 100%

#content-main {
  background: blue;
  color: white;
  height: 100%;
}

Answer 5

Попробуйте этот код. Я добавил max-width: 100% и height: auto к изображению

	#content-header {
				background:red;
				color:white;
			}
			#content-main {
				background:blue;
				color:white;
				height:100vh;
			}
			#content-header {
				background:red;
				color:white;
			}
            #background-img{
                max-width: 100%;
                height: auto;
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="app" class="h-100">
		
			<div id="content" class="d-flex flex-column">
				
				<nav id="content-header" class="p-4">
				
					<div class="navContent d-flex justify-content-between">
				
						Navbar
					
					</div>
				
				</nav>

				<main id="content-main" class="flex-grow-1 p-5">
                    
					Main Content
					<img id="background-img" class="img-fluid" src="https://placeimg.com/1000/1000/any">

				</main>

				<div id="footer" class="p-4">
				
					Footer Content
	
				</div>

			</div>

		</div>