How to keep all html within a 100% div height?

Asked

Viewed 36 times

-3

Hello How do I keep my html inside the background image without creating that white background and so that the Divs - yellow and black - also respect the 50% height within that height of the background image and without the overflow? When using overflow: Hidden, I lose the content of the screen that exceeds the background image...

print do projeto

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Agência de Marketing </title>
    <link rel="stylesheet" href="/lp_marketing/css/index.css">
</head>
<body>

    <!-- INICIO DO CABEÇALHO -->
    <header>
        <div class="logo">
            <img src="/lp_marketing/img/logo.png" alt="">
        </div>
        <nav>
            <ul>
                <li> Home </li>
                <li> About </li>
                <li> Workshop </li>
                <li> Contact </li>
            </ul>
        </nav>
        <div class="pesquisa">
            <div class="pesquisa-box"><input type="text" placeholder="Pesquisa..."></div>
            <div class="menu-box">
                <img src="/lp_marketing/img/menu.png">
            </div>
        </div>
    </header>
    <!-- FIM DO CABEÇALHO -->

    <!-- INICIO DO CORPO -->
    <main>
        <div class="box-esquerda">
            <div class="poligonos">
                <h1> GROW YOUR <br> BUSINESS <br> WITH US!</h1>
                <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit ea architecto voluptas at? Voluptates alias ut atque quis impedit, provident deserunt labore eius, iste dolorum modi natus minus recusandae voluptatem. </p>
                <div class="botao"><input type="button" value="GET IN TOUCH"></div>
                <div class="social">
                    <ul>
                        <li><img src="/lp_marketing/img/insta.png"></li>
                        <li><img src="/lp_marketing/img/face.png"></li>
                        <li><img src="/lp_marketing/img/twit.png"></li>
                        <li><img src="/lp_marketing/img/zap.png"></li>
                    </ul>
                </div>
            </div>
        </div> 

        <div class="box-direita">
           <div class="box-direita-top">
               <img class="circle-menor" src="/lp_marketing/img/circulo-menor.png">
           </div>
           <div class="box-direita-bottom">
               <img class="tracos" src="/lp_marketing/img/traços.png">
           </div>
        </div>
    </main>
    <!-- FIM DO CORPO -->

</body>
</html>

CSS

@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    background-image: url("/lp_marketing/img/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    width: 100%;
    height: 100%;
}

header {
    width: 100%;
    height: 100px;
    background-color: blue;
}

.logo {
    float: left;
    width: 25%;
    height: 90px;
}

.logo img {
    float: right;
    margin-right: 50px;
    width: 60%;
    height: 60%;
    margin-top: 25px;
}

nav {
    float: left;
    width: 45%;
    height: 90px;
}

nav ul {
    list-style: none;
    text-align: center;
}

nav ul li {
    display: inline-block;
    font-size: 20px;
    padding-left: 50px;
    padding-top: 50px;
    font-weight: bold;
    color: white;
}

.pesquisa {
    float: left;
    width: 30%;
    height: 90px;
}

.pesquisa-box {
    width: 70%;
    padding-top: 35px;
}

.pesquisa-box input {
    float: left;
    width: 100%;
    height: 40px;
    border: 2px solid rgb(0, 219, 185);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    outline: none;
    background-color: transparent;
    color: white;
    padding-left: 15px;
}

.pesquisa-box input::placeholder {
    padding-left: 10px;
    color: white;
    float: right;
    padding-right: 15px;
    padding-top: 10px;
}

.menu-box {
    float: left;
    width: 30%;
    height: 40px;
    padding-left: 15px;
}

.menu-box img {
    height: 100%;
}

main {
    width: 100%;
    height: 100%;
}

.box-esquerda {
    float: left;
    width: 50%;
    height: 100%;
}

.box-direita { 
    float: right;
    width: 50%;
    height: 100%;
    background-color: yellow;
}

.poligonos {
    width: 100%;
    height: 100%;
    background-image: url("/lp_marketing/img/poligonos.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.poligonos h1 {
    font-size: 250%;
    padding-left: 23%;
    padding-top: 8%;
    color: white;
}

.poligonos p {
    font-size: 100%;
    padding-left: 23%;
    padding-top: 5%;
    color: white;
    text-align: justify;
    padding-right: 150px;
}

.botao {
    float: left;
    width: 100%;
    height: auto;
    padding-left: 23%;
    padding-top: 5%;
}

.poligonos input {
    width: 35%;
    height: 35px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    font-size: 130%;
    font-weight: bold;
    background-color: rgb(0, 219, 185);
}

.social {
    float: left;
    width: 100%;
    height: auto;
    padding-left: 23%;
}

.social ul {
    list-style: none;
    margin-top: 8%;
}

.social li {
    display: inline-block;
    padding-right: 10px;
}

.social img {
    width: 40px;
    height: 40px;
}

.box-direita-top {
    width: 100%;
    height: 50vh;
    float: right;
}

.box-direita-bottom {
    width: 100%;
    height: 50vh;
    float: right;
    background-color: black;
}

.box-direita-top img, .box-direita-bottom img {
    float: right;
}

.box-direita-top img{
    width: 100px;
    height: 100px;
}

.box-direita-bottom img {
    width: 100px;
    height: 50px;
}
html5 css3 responsive-layout float

1 answer

-2

in your body, where you define your image, already tried to use some of the alternatives below to define the background-size:

1° Form:

background-size: 100% auto;

100% refers to the width (width) of the image and the auto refers to the height (height) of the image.

2° Form

background-size: cover;

``

For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

  • the problem is that regardless of using cover, contain, % or even auto, creates a space beyond the background-image... I will update and show how is the project itself...

  • solved just gave a height: Calc(100% - 100px) in my <main> since 100px is the height of my header and precedes the <main> Thanks for the help ^^

Browser other questions tagged html5 css3 responsive-layout float

You are not signed in. Login or sign up in order to post.