Question

经过长时间的中断后我回到了html / css，需要一些帮助。

背景：我使用1列布局和jQuery在用户与固定导航栏交互时自动将页面滚动到各个div。

问题：当您在垂直分辨率大于我的笔记本电脑或移动设备的屏幕上查看页面时，您可以同时看到所有或部分不同的div部分。

问题：有没有办法垂直分隔div，以便滚动功能类似于我使用链接到不同文件的传统导航栏？换句话说，我不想一次看到所有的div，只是用户点击的那个。

非常感谢！

Answer 1

<div id="content">
    <div class="container">
        <div class="pseudopage">
            foo
        </div>
    </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;
}

享受！此外，＃content div很可能是页面的主体，但你必须记住设置一个高度。（专业提示 - 如果您将html的高度设置为100％，将body设置为100％，那么您将填满屏幕。）

在一列设计中垂直居中div

1 个答案: