html - 在默认视口(viewport)下方放置一个 div 容器

Question

我正在构建一个小型 Web 应用程序，我正在尝试创建一个我无法开始工作的 div 排列。

我正在尝试做这样的事情:

+------------------+  <--+
|top bar           |     |
+------------------+     |  (main section)
|                  |     |
|main content      |     +- Viewport
|                  |     |
|                  |     |
|------------------+     |
|bottom bar        |     |
|------------------+ <---+
|extra details,    |
|history, etc..    |       (secondary section)
|                  |
|                  |
|footer            |
+------------------+

默认情况下可以看到主要部分，如果他滚动，他就会看到次要部分。

我已经能够通过创建容器来创建主要部分:

#viewport {
  min-height: 100%;
  top: 0px;
  left: 0px;
  right: 0px;

  padding: 0px;
  border: 0px;
  margin: 0px;
}

但是，我还没有找到将次容器设置在主容器下方的方法，position: relative;将次容器放在主容器的后面。

有没有可能做这样的事情？？

提前致谢

Answer 1

我终于成功了!!这是我所做的:

在我的 common.css 中:

/* MAIN SECTIONS */
#viewport {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;

  /* should be automatically set by javascript
  height: 600px; */
}

#scrollport {
  position: absolute;
  right: 0px;
  left: 0px;

  /* should be automatically set by javascript 
  top: 600px; /* same as viewport height */
}

然后，我改编了我找到的脚本here使其成为一个函数:

function getViewPortHeight(){
var viewportheight;
 
 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 
 if (typeof window.innerWidth != 'undefined')
 {
      viewportheight = window.innerHeight
 }
 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

 else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       viewportheight = document.documentElement.clientHeight
 }
 
 // older versions of IE
 
 else
 {
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
 }
return viewportheight
}

然后创建另一个函数来根据我的需要设置我的 div:

function changeHeight(){ 
// SET THE viewport CONTAINER
// get the div element (viewport)
vwport = document.getElementById('viewport');

// set the height
vwport.style.height = getViewPortHeight() + "px";

// SET THE scroll CONTAINER
// get the div element (scroll)
scrll = document.getElementById('scrollport');
// set the top position
scrll.style.top = getViewPortHeight() + "px";
}

最后，这个命令实际更新 div 大小:

onload = changeHeight;

它比我最初想象的要复杂得多，但至少我能享受到看到它工作的满足感!

谢谢!