Html 将div容器放置在默认视口下方

我正在构建一个小的网络应用程序，我正在尝试创建一个无法工作的div安排

我正在尝试这样做：

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

但是，我还没有找到一种方法来设置主容器下方的辅助容器，

position:relative将辅助容器放置在主容器后面

这样做有可能吗

提前感谢，
是的，这是可能的

您可以在主视口的末尾提供额外信息的链接。当用户单击它时，会显示次要内容。通过这一点，您可以让用户选择是否查看额外的内容，您的问题也将得到解决。您可以使用css属性
可见性
或
显示
来实现这一点，还可以使用Javascript在属性之间切换并提供效果；如有需要;；观看幻灯片效果、淡入淡出效果等内容时

希望这有帮助。
我终于让它工作了！！以下是我所做的：

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

然后，我修改了我找到的脚本，使其成为一个函数：

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;

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

谢谢
 我想做类似的事情，在这里找到了你的问题

我想我会添加我的解决方案

仅CSS：

HTML，主体，#视口{高度：100%}

您的第二节需要位于不同div中的#视口之后

我还没有做过认真的跨浏览器测试，因为你在手机上，你可能需要一个元视口标记

运气

onload = changeHeight;