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 flexbox

<aside>
  Menu
</aside>

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

/*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 */
}

2。 old-school 方式（兼容到IE8）

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

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

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://yourdomain.com/$1 [R=301,L]

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>