Estaba trabajando en una página web a principios de esta semana en la que la 'imagen de banner' se cortaba del puerto de visualización de la pantalla dependiendo del navegador y el tamaño de la pantalla.

Pensé que simplemente convirtiendo el Contenedor principal a 'Altura: 100vh', esto haría que todos los elementos secundarios encajaran en el contenedor principal que ahora está configurado para ajustarse a la altura de cualquier ventana gráfica.

Esto no funcionó como pretendía. La imagen de la pancarta todavía se estaba cortando a pesar de que el contenedor principal estaba configurado en 100vh.

¿Hay alguna forma de hacer esto?

Enlace JSFiddle

CSS

.parent {
    width: 100%;
    background-color: blue;
   border: 1px dashed blue;
    text-align: center;
}

.child-header {
    background-color: rgba(122, 234, 221, .4);
    width: 100%;
    background-color: gray;
    position: relative;
}

p {
    color: white;
    font-family: sans-serif;
    text-align: center;
}

h1 {
    color: white;
    text-align: center;
    font-family: sans-serif;
}

.banner-image {
    background-color: black;
    width: 80%;
    min-height: 500px;
    position: relative;
    margin: 0 auto;
}

HTML

<div class="parent"><!-- Wrapper Parent Container -->

    <div class="child-header">
        <p>Cool header with a nav will go here</p>
    </div>

    <h1>Some Headline Tag Here</h1>

    <div class="banner-image">
    </div>

    <h2>Blah Blah Blah...</h2>


</div><!-- End Wrapper -->