Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/sql-server-2005/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 单柱设计中的垂直中心div_Css_Html_Scroll - Fatal编程技术网

Css 单柱设计中的垂直中心div

Css 单柱设计中的垂直中心div,css,html,scroll,Css,Html,Scroll,经过长时间的休息后,我又回到了html/css,需要一些帮助 背景:当用户与固定导航栏交互时,我使用一栏布局和jQuery自动将页面滚动到各个div 问题:当你在比我的笔记本电脑或移动设备垂直分辨率更高的屏幕上查看页面时,你可以同时看到所有或部分不同的div部分 问:有没有一种方法可以垂直分离div,这样滚动功能就类似于我使用传统的导航条链接到不同的文件?换句话说,我不想一次看到所有的div,只想看到用户单击的div 非常感谢 <div id="content"> <d

经过长时间的休息后,我又回到了html/css,需要一些帮助

背景:当用户与固定导航栏交互时,我使用一栏布局和jQuery自动将页面滚动到各个div

问题:当你在比我的笔记本电脑或移动设备垂直分辨率更高的屏幕上查看页面时,你可以同时看到所有或部分不同的div部分

问:有没有一种方法可以垂直分离div,这样滚动功能就类似于我使用传统的导航条链接到不同的文件?换句话说,我不想一次看到所有的div,只想看到用户单击的div

非常感谢

<div id="content">
    <div class="container">
        <div class="pseudopage">
            foo
        </div>
    </div>
</div>

享受吧!此外,#content div很可能是页面的主体,但您必须记住设置高度。(Pro提示-如果你将代码 HTML /代码>的高度设置为100%,并且<代码>正文< /代码> 100%,那么你将填充屏幕。

显示我们。所以容器实际上是你正在对齐的,中间显示的是假的,对吗?我只是想知道为什么。是的,你将容器与页面大小对齐。通过使容器不可见,当屏幕大小改变时,它将自动增长,将其他信息推出内容div的边缘。然后,您可以在容器div中按自己喜欢的方式对齐伪页面div,并且您可以始终确保它将与整个页面相关。
​#content{
    border: 1px solid black;
    height: DESIRED_HEIGHT;
    width: DESIRED_WIDTH;
    overflow:hidden;
}

.container {          
    height:100%;
    width:100%;
    text-align:center;
}

.pseudopage {
    vertical-align:middle;  
    display:inline-block;
    margin:px;
}
div.container:before{
    content: '';        
    height:100%;
    width: 0px;
    margin:0px;
    vertical-align:middle;
    display:inline-block;
}