Css 如何从上到下为整个尺寸制作div_Css_Html_Size

Css 如何从上到下为整个尺寸制作div

css html

Css 如何从上到下为整个尺寸制作div,css,html,size,Css,Html,Size,我有这样一个场景： <div id=area> <div id=box> </div> </div> <div id=footer> </div> div“area”位于中间，宽度为700px，左右两侧都有阴影。然后是一个500像素宽的div框，其中包含文本和选项。在底部我有一个页脚，其中有一行文字所以，我在div“area”处的阴影效果和长方体在同一点停止。在下一页，我在同一个框中有大约2000px的文本量

我有这样一个场景：

<div id=area>
 <div id=box>
 </div>
</div>
<div id=footer>
</div>

div“area”位于中间，宽度为700px，左右两侧都有阴影。然后是一个500像素宽的div框，其中包含文本和选项。在底部我有一个页脚，其中有一行文字

所以，我在div“area”处的阴影效果和长方体在同一点停止。在下一页，我在同一个框中有大约2000px的文本量，并且“area”div的阴影和它应该的一样

我想要“area”div的整个屏幕大小，如果里面有更多的文本，则需要更大的屏幕大小。

尝试以下方法：

HTML

<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>Title</title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <div id="area">
   <div id="box">
   </div>
  </div>
  <div id="footer">
  </div>
 </body>
</html>

显示更多代码（特别是css）或示例

   html {height:100%} 
   body {height:100%;margin: 0;padding: 0;} 
   #area {height: 100%;background-color: blue}