Question

我正在构建一个小型的webapp，我正在尝试创建一个我无法工作的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;

我最初认为它会变得复杂得多，但至少我很高兴看到它的工作满意！

谢谢！

Answer 2

是的，可以这样做。

您可以在主视口末尾提供额外信息的链接。当用户点击它时，显示辅助内容。通过这种方式，您可以让用户选择是否看到额外的东西，并且您的问题也将得到解决。您可以使用css属性visibility或display来实现此目的，也可以使用Javascript在属性之间切换并提供效果;如果需要;查看幻灯片效果或淡入淡出效果等内容。

希望这有帮助。

Answer 3

我希望做类似的事情，并在这里找到你的问题。

以为我会添加我的解决方案。

仅限CSS：

HTML，BODY，＃viewport {height：100％}

您的辅助部分需要在另一个div中的#viewport之后。

我还没有进行过严格的跨浏览器测试，而且由于您使用的是移动设备，因此可能需要META视口标记。

福

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

3 个答案: