CODEWITHSUNDEEP
htmlcss
Richard Cole
Richard Cole

Reputation: 3

Can't get sidebar to height: 100%

I have recently been learning CSS and i'm trying to understand why I can't get my sidebar to display correctly.

https://jsfiddle.net/bnu0Ljuo/1/

In my code, I have added 

html, body, .container, .sidebar, .content {
  height: 100%;
}

Which makes the sidebar extend, but it carries an additional scroll. There is a scroll when there is no reason for there to be a scroll. Also, If I add enough text to fill in the content div, I will not be able to see the data. See here:

https://jsfiddle.net/bnu0Ljuo/5/

Notice how you can't scroll down to see "TEST CAN'T SEE TEXT". How is this?

Upvotes: 0

Views: 1076

Answers (3)

Nutshell
Nutshell

Reputation: 8537

You want this ? See this fiddle

I replace selectors and add min-height to html, body. I also removed overflow: hidden; on the .container and add height: 100vh; to the .sidebar : 

.container, .sidebar, .content {
  height: 100%;
}

div#container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    height: 100%;
}

html, body { 
  min-height: 100%;
}

.sidebar {
  height: calc(100vh - 60px);
  min-height: 100%;
  top: 0;
}

Upvotes: 2

Red
Red

Reputation: 7334

Well, the awnser is very simple. With the following code:

html, body, .container, .sidebar, .content {
  height: 100%;
}

You are telling the selectors to be 100% height. In this case 100% is the height of the screen aka viewport. The extra space that gets added, is the height of the header. To fix this, tell the selectors to be minimal 100% height.

So change this:

html, body, .container, .sidebar, .content {
  height: 100%;
}

into:

html, body, .container, .sidebar, .content {
  min-height: 100%;
}

https://jsfiddle.net/bnu0Ljuo/14/

Upvotes: 0

RacoonOnMoon
RacoonOnMoon

Reputation: 1586

I don't know what you want to achieve but if you set

html, body, .container, .sidebar, .content {
  height: auto;
  min-height: 100vh;
}

all your content is visible.

https://jsfiddle.net/ab51xj8u/2/

Upvotes: 0

Related Questions