Question

场景：我需要一个具有相对定位的容器，它有2个绝对定位的子容器。在单击容器时，两个子项将在转换属性上转换，一个移动到左侧，一个移动到右侧，都在窗口外，所以我需要以某种方式在父级上设置overflow: hidden， 为了不在父容器外显示转换元素 。

由于绝对的孩子，父母没有高度设置，当我使用overflow-x: hidden时，没有任何东西显示出来。

是否可以设置溢出，以便当孩子转换为左/右时，不会显示滚动条？我不想在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％;

Answer 1

将half-left和half-right定位为absolute，您可以将它们向左浮动并将overflow: hidden添加到父容器中。

.half-left, half-right {
    float: left;
}

.box {
    position: relaitve;
    overflow: hidden;
}

然后，当您将active添加到父容器时，这两个子项应按您的意图进行转换。

以下是Codepen演示： - https://codepen.io/aphextwix/pen/KmmgXJ

Answer 2

我建议不要使用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>

父绝对与绝对孩子隐藏

2 个答案: