场景:我需要一个相对定位的容器，它有 2 个绝对定位的子容器。单击容器时，两个子项都将在 transform 属性上进行转换，一个向左移动，一个向右移动，都在窗口外，所以我需要以某种方式设置 overflow: hidden parent，为了不在父容器之外显示过渡元素。
问题是父级没有设置高度，因为绝对子级，当我在其上使用 overflow-x: hidden 时，不再显示任何内容。
是否可以设置一个溢出，以便当 child 向左/向右转换时不显示滚动条？我不想在 body 元素上设置溢出。我正在寻找纯 CSS 解决方案(如果有的话)。
同时为父级设置固定高度也不能解决我的问题，请考虑到这一点。
这是我的 HTML 代码:
<!DOCTYPE html>
<html>
<head>
<title>FullScreen-Split | Experimental</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="box-container">
<div class="box clearfix">
<div class="half-left">
<div class="split">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
<div class="half-right">
<div class="split">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
这是我的 SASS 代码
.box {
width: 100%;
position: relative;
&.active {
.half-left {
transform: translateX(-150%);
}
.half-right {
transform: translateX(150%);
}
}
.half-left,
.half-right {
width: 50%;
padding: 25px 0;
transition: 2s transform ease-out;
background-color: #3a3a3a;
position: absolute;
overflow: hidden;
color: #fff;
}
.half-left {
top: 0;
left: 0;
> .split {
width: 200%;
}
}
.half-right {
top: 0;
left: 50%;
> .split {
margin-left: -50%;
}
}
.split {
width: 100%;
height: 100%;
}
.details {
text-align: center;
> i.fa {
font-size: 62px;
margin-bottom: 40px;
}
> h3 {
font-size: 32px;
font-weight: bold;
}
}
}
.clearfix {
clear: both;
&::before,
&::after {
content: '';
display: table;
clear: both;
}
}
html 和 body 元素设置为 width: 100% 和 `height: 100%;
最佳答案
我建议不要使用 position: absolute 或 float，因为它们都不适用于一般布局。
它们都将元素从流中移除(尽管方式有所不同)，并使创建响应式页面变得更加困难。
你可以稍微简化一下代码，使用display: inline-block，像这样
.box {
width: 100%;
}
.box .half {
display: inline-block;
width: 50%;
padding: 25px 0;
transition: 2s transform ease-out;
background-color: #3a3a3a;
overflow: hidden;
color: #fff;
}
.box .details {
text-align: center;
}
.box .details > i.fa {
font-size: 62px;
margin-bottom: 40px;
}
.box .details > h3 {
font-size: 32px;
font-weight: bold;
}<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="box-container">
<div class="box">
<div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div><!-- this comment remove the white space between the inline-block elements
--><div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.js"></script>或者使用flexbox，这是今天推荐的布局方式
.box {
width: 100%;
display: flex;
}
.box .half {
width: 50%;
padding: 25px 0;
transition: 2s transform ease-out;
background-color: #3a3a3a;
overflow: hidden;
color: #fff;
}
.box .details {
text-align: center;
}
.box .details > i.fa {
font-size: 62px;
margin-bottom: 40px;
}
.box .details > h3 {
font-size: 32px;
font-weight: bold;
}<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="box-container">
<div class="box">
<div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
<div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.js"></script>关于css - 父级溢出隐藏在绝对子级中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43705319/