html – 当DIV没有足够的空间但保持DIV居中时,如何使滚动条出现
发布时间:2020-12-14 18:51:56 所属栏目:资源 来源:网络整理
导读:我想创建一个中心的表单. HTML: div id="profileContainer”…/div CSS: #profileContainer { border-radius: 25px; background: #ffffff; padding: 10px; width: 100%; max-width: 760px; display: inline-block; position: fixed; top: 50%; left: 50%;
我想创建一个中心的表单.
HTML: <div id="profileContainer”>…</div> CSS: #profileContainer { border-radius: 25px; background: #ffffff; padding: 10px; width: 100%; max-width: 760px; display: inline-block; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } 问题是当屏幕垂直缩短时,窗体的一部分被隐藏,并且没有滚动条可以使其可访问:JSFiddle. 题: 当单独的垂直空间不足时,如何使滚动条出现,但是当有足够的空间时,请保持我的div水平和垂直居中? 解决方法
这可以通过简单地从#profileContainer删除所有定位并将以下规则添加到body来轻松实现:
display: flex; justify-content: center; align-items: center; min-height: 100vh; 前三个规则将集中#profileContainer,而最后一个规则将确保主体始终至少为视图的完整高度. JSFiddle不会正确显示最后一条规则,而您的示例太大,无法嵌入到此处,所以我moved it over to codepen. 作为附注,您在关闭主要之前有一个额外的关闭div标签. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |