CSS background color in div only 20px high

user_8582176 0
Viewed 1002

* {
    margin: 0;
    padding: 0;
    -ms-user-select: None; 
    -moz-user-select: None; 
    -webkit-user-select: None; 
}

html, body {
    font: 16px Helvetica;
    min-height: 100%;
}

#channel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}

#channelName {
    border: 0px;
    border-bottom: 1px solid black;
    outline: none;
    font: 18px Helvetica;
}

#erstelleChannel {
    font: 18px Helvetica;
    border: 1px solid black;
    padding: 0px 5px;
}

#erstelleChannel:hover {
    font: 18px Helvetica;
    border: 1px solid black;
    background-color: darkgray;
    padding: 0px 5px;
}

#eingabe {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 25px;
    text-align: center;
    border-top: 1px solid gray;
}

#eingabeUser {
    width: 18%;
    height: 25px;
    border: 0;
    outline: none;
}

#eingabeInhalt {
    width: 78%;
    height: 25px;
    border: 0;
    outline: none;
}

#sendeNachricht {
    display: none;
}

#header {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid gray;
    height: 50px;
    line-height: 25px;
}

#ausgabe {
    padding: 20px;
    background-color: beige;
}
<!doctype html>

<html>
<head>

</head>
<body>

<div id="header"><div id="channelheader"></div><div id="typing"></div></div>
<div id="ausgabe"></div>
<div id="eingabe">
    <form>
        <input type="text" id="eingabeUser" placeholder="Name" required>
        <input type="text" id="eingabeInhalt" placeholder="Nachricht" required>
        <input type="submit" id="sendeNachricht">
    </form>
</div>

</body>
</html>

As you can see the background color in the div is just 20px high because of the padding inside #ausgabe. I want the div to be colored completely from the upper line to the line at the bottom. How can I achieve that? I played with the height in the parent element html and body, it did not work. What else can I try? Browsing the web didn't help.

css html
4 Answers

Set height:100% instead min-height: 100%; to body

and also set height: calc(100% - 115px); to #ausgabe

* {
    margin: 0;
    padding: 0;
    -ms-user-select: None; 
    -moz-user-select: None; 
    -webkit-user-select: None; 
}

html, body {
    font: 16px Helvetica;
    height: 100%;
}

#channel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}

#channelName {
    border: 0px;
    border-bottom: 1px solid black;
    outline: none;
    font: 18px Helvetica;
}

#erstelleChannel {
    font: 18px Helvetica;
    border: 1px solid black;
    padding: 0px 5px;
}

#erstelleChannel:hover {
    font: 18px Helvetica;
    border: 1px solid black;
    background-color: darkgray;
    padding: 0px 5px;
}

#eingabe {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 25px;
    text-align: center;
    border-top: 1px solid gray;
}

#eingabeUser {
    width: 18%;
    height: 25px;
    border: 0;
    outline: none;
}

#eingabeInhalt {
    width: 78%;
    height: 25px;
    border: 0;
    outline: none;
}

#sendeNachricht {
    display: none;
}

#header {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid gray;
    height: 50px;
    line-height: 25px;
}

#ausgabe {
    padding: 20px;
    background-color: beige;
height:calc(100% - 115px);
}
<!doctype html>

<html>
<head>

</head>
<body>

<div id="header"><div id="channelheader"></div><div id="typing"></div></div>
<div id="ausgabe"></div>
<div id="eingabe">
    <form>
        <input type="text" id="eingabeUser" placeholder="Name" required>
        <input type="text" id="eingabeInhalt" placeholder="Nachricht" required>
        <input type="submit" id="sendeNachricht">
    </form>
</div>

</body>
</html>

user_91407400

Hope this helps

Add height to the div id #ausgabe and adjust it as per your desire. Example below:

#ausgabe {
    padding: 20px;
    height: 86vh; // <- adjust numeric value of this section until you 
    achieve your height
    background-color: beige;
}
user_108011540

In the css file with id ausgabe, you may write

#ausgabe {
        height: 100%;
        background-color: beige;
    }

This will enforce the <div> to take the 100% of its space. You may now play with the height percentage until you are satisfied with the outcome. Alternately, you may add padding: 100%; instead of height and play with it. You may also try using only padding-bottom: 100%; and play around with it.

As shown below - please, change the min-height in html,body { selectors to height

html, body {
        font: 16px Helvetica;
        height: 100%;
    }

Hope this helped solve your issue.

user_107796450

replace min-height: 100%; with height: 100%; and add height:calc(100% - 115px); in #ausgabe

It will resolved your issue.

user_91880230
Related