填充页面过量使用CSS

-1

我试图创建一个div，将在页面的底部填充任何空的空间，如果有任何，或者如果页面的内容延伸到/过去的底部消失。我知道这可以使用java来完成，但我想尽可能使用尽可能少的包装来尽可能地使用CSS。填充页面过量使用CSS

我已经尝试了几种不同的方法，但到目前为止没有奏效了，大部分我所遇到的是粘页脚，表格和填充特定的div元素过多（因为我想要的，这不是它在body/html级别的整个页面上工作）。

我已经得到了最远的（这仍然无法正常工作）是尝试与交替顶&底值绝对定位，但设置top: inherit然后bottom: 0px只是没有发挥好。例：http://jsfiddle.net/V4RnC/6/

的基本问题归结为：1.保持DIV的顶部哪里会通常只是之后以前的div 2.延长div的底部到第3页的底部，内容和页面大小的变化因人而异4如果没有多余的空间，消失。

任何帮助将不胜感激！

更新：到目前为止，似乎每个人都认为这是Javascript的工作，所以我想出了这个快速的jQuery的解决方案：http://jsfiddle.net/V4RnC/7/随意宰我一个新的代码，因为我一直很欣赏的学习机会:)

来源

2014-01-22 Koopa

你期待http://jsfiddle.net/V4RnC/3/？ – Karuppiah

@Beginner只有在“填充”区域调整到页面高度，从以前的DIV到页面底部的底部运行，没有扩展页，但如果消失，页面内容就足以填满窗口...所以是的，我期待“填充”区域占用比我原来的jsfiddle更多的空间，但是你发布的简单例子并不是我期待的最终结果。 – Koopa

@Koopa然后应该是什么样的预期结果？ –

如果你想要的东西为背景的目的在这里，我会用一个div，绵延在整个可见区域（如果可见区域是内容一样大，它只是隐藏在后面内容）。

然后，它会是这样的，在这里：http://jsfiddle.net/V4RnC/4/http://jsfiddle.net/V4RnC/5/

这是我使用的CSS代码：

#content { 
    background-color: #F00; 
    /* The overflow is to keep margins of the first and last element in here. Disable it and you get what I mean ;) */ 
    overflow: hidden; 
} 

#fill { 
    background-color: #00F; 
    height: 100%; 
} 

html { 
    height: 100%; 
} 
body { 
    height: 100%; 
    margin: 0; 
}

这里有更多的一点信息：http://codecamel.com/fullheight

我能想象，我有时不得不用min-height而不是height为身体或HTML ...但不记得为什么...

来源

2014-01-22 07:40:30 SimonSimCity

谢谢，但这并不是我想要做的。最小高度就在那里，这样div就不会消失。我正在尝试创建一个div，它将从前一个div的底部延伸到页面的底部，而不会进一步扩展，如果页面的前一个内容足以将其扩展超过窗口大小，它将消失。这是一个更新：http://jsfiddle.net/V4RnC/6/ – Koopa

Koopa，我认为这只是可能的表...或JavaScript。顺便说一句：我真的很想在准备好后在其他一些设备上尝试这个应用程序...... f.e.在我的手机上... – SimonSimCity

同意。你不能使用HTML和CSS来填充没有内容的div页面，只能用@SimonSimCity的建议伪装它。 – BFWebAdmin

填充页面过量使用CSS

回答

相关问题