让 div 保持屏幕宽度和高度

Question

我希望创建一个网站，其中有一个主 div，其中宽度和高度始终是屏幕的大小。无论这个 div 中包含什么，它都必须包含这个宽度和高度。

如果您查看this 我想要的示例。

我的目标是将导航部分包含在左侧的蓝色大部分中，并将主页内容显示在白色框中，并且此白色 div 只能横向滚动。我已经搜索了几天试图让它工作，但总是出错。我尝试过的例子是：

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?

如果有人可以帮助解决这个问题，或者至少为我指明正确的方向以获得指导，那就太棒了。提前致谢。

Answer 1

1。使用 CSS3 弹性框

/*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。 老派方式（兼容到 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>

Answer 2

按照您喜欢的方式设置主 div css 溢出属性后， 你总是可以用javascript（如给定的例子）——它会完全向后兼容。

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