100% Div Height Without Scrollbar

100% Div height without scrollbar

If my assumption I put forward in my comment to the question is right, then sidebar is 100% high, and on top of that you have a 23px header, so that causs your container to be 100% + 23px high.

In the future you will have in css calc() http://hacks.mozilla.org/2010/06/css3-calc/ . This will solve your problem.

Now, I guess you should calculate the height of the sidebar ( = height of container - 23px), by javascript.

How to set 100 % height without having a vertical scrollbar?

Be aware that percentual heights refer to the height of the parent.
You can use calc() to solve your issue:

#__next{
    height: calc(100% - navbarpx);
    ...
}

calc()

For the padding issue you can look into border-box.

How can I make DIV 100% height of browser without vertical scrolling of header

Here's a modern solution using flexbox. Regardless of the height of the header the rest of the elements will stretch vertically to fill the remaining space. Here's the fiddle: http://jsfiddle.net/mggLY/1/.

HTML:

<div id = "wrapper">
    <div class="header">Header</div>
    <div>
        <div class="leftpanel">Left Panel</div>
        <div class="rightpanel">Right Panel</div>
    </div>
</div>

CSS:

* {
    margin: 0;
    padding: 0;
    border: 0;
}

html, body {
    height: 100%;
}

.header{
    background: #333;
    padding: 15px;
    text-align:center;
    font-size: 18px;
    font-family: sans-serif;
    color: #fff;
}

.leftpanel{
    background: #CCC;
}

.rightpanel{
    background: #666;
}

#wrapper {
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    outline: 1px solid red;
}

#wrapper > .header {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}

#wrapper > .header + div {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}

#wrapper > .header + div > div:first-of-type {
    -webkit-flex: 7 0 0;
    flex: 7 0 0;
}

#wrapper > .header + div > div:last-of-type {
    -webkit-flex: 3 0 0;
    flex: 3 0 0;
}

Get div height without the scrollbar

try this

html

<div class="div1">
    <div class="div2"></div>
</div>

using jQuery

var width = $('.div1')[0]['clientWidth'];
var height = $('.div1')[0]['clientHeight'];

working demo http://jsfiddle.net/7xmun47a/

100% Height without scrollbars (parent and nested childs with flexbox)

You should be able to make use of the flex-grow property:

HTML

<div class="wrapper">
    <div class="header"></div>
    <div class="content">
        <div class="element-child1"></div>
        <div class="element-child2"></div>
    <div/>
</div>

Css

html, body, .wrapper {
    width: 100%;
    height: 100%;
    margin: 0;
}

.wrapper {
    display: flex;
    flex-direction: column;
}

.wrapper > .header {
    flex: 0 0 40px;
    background-color: black;
}

.wrapper > .content {
    flex-grow: 1;    
    display: flex;
    background: red;
    flex-direction: column;
}

.element-child1 {
    flex: 0 0 20px;
    background-color: blue;
}

.element-child2 {
    flex-grow: 1;
    background-color: green;
}

flex-grow example

Alternatives

calc example

display:table example

Display images in flexbox at 100% height without scrollbar

.item {
  position: relative;
  height:33%;
  overflow:hidden;
}

img {
  position: absolute;
  transform: translateY(-50%);
  width: 100%;
  object-fit: cover;
}

this should work i think!

Display flex height is 100% without scrollbar but not 100% with scrollbar

You can change height:100% to min-height:100%

setting a margin or padding for a 100% height grid without scrollbars

Use padding instead of margin for selector .container.withMargin:

.container.withMargin {
    padding: 5px;
}

And add box-sizing: border-box for the .container selector.

function toggle() {
    document.querySelector(".container").classList.toggle("withMargin");
}

html,
body,
.container {
    height: 100%;
    margin: 0;
}

.container {
    display: grid;
    grid-template-rows: 50px 1fr 1fr;
    grid-template-columns: 300px 1fr 1fr;
    gap: 5px 5px;
    grid-auto-flow: row;
    grid-template-areas: "logo header header" "nav-one main main" "nav-two main main";
    background-color: black;
    box-sizing: border-box;
}

.main {
    grid-area: main;
    background-color: lightcoral;
}

.logo {
    grid-area: logo;
    background-color: lightcyan;
}

.header {
    grid-area: header;
    background-color: lightgoldenrodyellow;
}

.nav-one {
    grid-area: nav-one;
    background-color: lightgray;
}

.nav-two {
    grid-area: nav-two;
    background-color: lightgreen;
}

.container.withMargin {
    padding: 5px;
}

<!DOCTYPE html>
<html>
    <head> </head>
    <body>
        <div class="container">
            <div class="main">
                <br />
                <button onclick="toggle()">toggle .container margin</button>
            </div>
            <div class="logo">logo</div>
            <div class="header">header</div>
            <div class="nav-one">nav one</div>
            <div class="nav-two">nav two</div>
        </div>
    </body>
</html>

reactjs/ occupy 100% height without scrollbar

Use:

const loginStyle = (muiBaseTheme => ({
    root:{
        background: "#000",
        minHeight: '100vh',
        overflow: 'hidden',

    }
}));

to hide the scroll bars.

---

Related Topics