Have div maintain screen width and height

Question

I am looking to create a website in which it has a main div in which both the width and the height is always the size of the screen. No matter what is contained within this div it must contain this width and height.

If you look at this example of what I want.

My aim is for the navigation section to be contained in the large blue part on the left and for the main page content to be displayed within the white box and for this white div to only scroll sideways. I have searched for days on trying to get this to work but something always goes wrong. Examples of things I have tried are:

How to make the main content div fill height of screen with css how to make a full screen div, and prevent size to be changed by content? How to make a div to fill a remaining horizontal space?

If somebody can help with this or at least point me in the right direction for guidance it would be awesome. Thanks in advance.

Welcome to Stackoverflow. Just a tip for developing: Define the problem clearly. *A well defined problem is half solved already*. You say "Something always goes wrong". So, show us some version of your code, and explain *specifically* what is wrong with it. — random_user_name, Feb 01 '17 at 00:16

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

1. Using CSS3 flexbox

/*QuickReset*/ *{margin:0; box-sizing:border-box;} html,body{height:100%;}

/*
OP: -I am looking to create a website in which it has a
main div in which both the width and the height is
always the size of the screen
A: -let this be body!
*/
body{
  background: #0ae;
  display: flex;
  flex-flow: row nowrap;
  padding: 40px;
}

/*
OP: -My aim is for the navigation section to be
contained in the large blue part on the left
A: -Thanks to CSS3 flexbox on body all you need is a desired menu width:
*/
aside{
  width: 140px;      /* or any size you want, px, %, ... */
}

/*
OP: -and for the main page content to be displayed within
the white box and for this white div to only scroll sideways
A: -add overflow:auto; to make it scroll and flex:1 to grow to available size
*/
article{
  background: #fff;
  overflow: auto;    /* make element scrollable */
  flex: 1;           /* let the browser grow this element */
}

/* just to demonstrate sideways scroll */
article{
  display: flex;
  flex-flow: row nowrap;
}
section{
  min-width:100%;
}

<aside>
  Menu
</aside>

<article>
  <section>"and I want this CONTENT area to scroll sideways"</section>
  <section style="background: #eee;">YEY</section>
</article>

2. The old-school way (compatible down to IE8)

/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;}


body{ /* your app */
  padding:40px;
  background: #0ae;
}

#aside{ /* your menu */
  float:left;
  width: 100px;
}
#content{ /* white content area */
  overflow: auto;
  margin-left: 100px;  /* menu is 100px remember? */
  height:100%;
  background: #fff;
}

/* Just to test horizontal scrollability */
#content{
  white-space:nowrap;
}
.page{
  white-space: normal;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height:100%;
  margin-right: -4px;
  /* Todo: make scroll vertically each page if needed */
}

<div id="aside">
  Menu
</div>

<div id="content">
  <div class="page">Content A</div>
  <div class="page" style="background:#eee;">Content B</div>
</div>

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 01 '17 at 00:19

Roko C. Buljan

196,159
39
305
313

"old school"? `calc` is CSS3. Old school would require JavaScript. I still like this answer, though! – StackSlave Feb 01 '17 at 00:25
1

@PHPglue wooooops :) edited :) I rushed to create the flexbox example but had plans to remove that CSS3 `calc`! thanks for noticing!! – Roko C. Buljan Feb 01 '17 at 00:29
1

Yeah, this answer should do! – StackSlave Feb 01 '17 at 00:55
I have been using viewport units on parent elements, ei VW, VH. Then use flexbox and percent units in children – Tithos Feb 01 '17 at 00:57
@Tithos in the case you did not set `html,body{}` to `height:100%` yes. – Roko C. Buljan Feb 01 '17 at 01:08
@Tithos no. Height `100%` is parent-related while `100vh` is always the viewport. So there's a huge difference. – Roko C. Buljan Feb 01 '17 at 01:47
I was referring to it application on the body and or HTML tag. – Tithos Feb 01 '17 at 05:19
@Tithos yep, I edited 1h ago with another example :) – Roko C. Buljan Feb 01 '17 at 05:26
Bulo the blue field on the right is not reserved for a Menu, but for NAVIGATION commands and purposes of the overstretching (screen-sized) content clipped under the white-box. – Bekim Bacaj Feb 01 '17 at 13:56
@BekimBacaj the question was pretty clear about the requirements. But again thanks for your concerns. Hope it's all for OP's good <3 – Roko C. Buljan Feb 01 '17 at 14:06
1

Sorry for such a late response to this answer but this was exactly what I was looking for and it worked perfectly! Thank you for your answer – Karl Martin Feb 12 '17 at 16:40

score 0 · Answer 2 · answered Feb 01 '17 at 01:18

0

after setting the main div css overflow properties the way you like them, you can always javascript it (as in the given example)- and it will be fully backward compatible.

<div id=[mainDivID]>
<script>
[maindDivID].style.width = screen.width +"px";
[maindDivID].style.height = screen.height +"px";
</script>
<!-- main div content -->
</div>

answered Feb 01 '17 at 01:18

Bekim Bacaj

5,707
2
24
26

Actually after setting the html and body height to `100%` you don't need JS – Roko C. Buljan Feb 01 '17 at 01:50
@RokoC.Buljan, oh, I know I don't - but the OP does need the content to extend to the size of the screen at all times no matter what other size the window of the document body may shrink by the user action. And that's something you can't do with width 100%. Because it's a relative value. – Bekim Bacaj Feb 01 '17 at 02:40
Aha, I think I understand. If the "white" DIV needs always the exact same size of the actual viewport, than yes! You're right, although i'd better forget about backward compatibility and use `100vh` and `100vw`, otherwise your solution would also need a function that recalls on window resize... and slowly you grow in unnecessary complexity. ;) – Roko C. Buljan Feb 01 '17 at 03:42
@RokoC.Buljan that's where you're wrong, professionals will never forget about the backward compatibility and will always try to use the minimum of assets for the maximum output. And once again, the OP doesn't care what is the size of the window running his application - what he wants is that the underlying content be fully expanded to the maximum resolution available on the device and at any given time. Percentage is no go - and everybody knows that. – Bekim Bacaj Feb 01 '17 at 05:43
I don't think you read well OP's question. If it helps I edited my answer to include OP's question step - by step. After you've read that, I can only sadly conclude that 1. your code can be hardly understood and implemented by a novice. 2. Does not accomplishes the task (by what OP asks). 3. you're not providing a solution to handle browser resize. So... thanks for reminding me about professionals ;) – Roko C. Buljan Feb 01 '17 at 09:17
bulo I don't think you have the right to dismantle the op's question to your own benefit – Bekim Bacaj Feb 01 '17 at 13:46

Have div maintain screen width and height

2 Answers2

1. Using CSS3 flexbox

2. The old-school way (compatible down to IE8)