制作元素以获得整个页面宽度

【问题标题】：Make element to get full page's width制作元素以获得整个页面宽度
【发布时间】：2018-03-18 02:52:33
【问题描述】：

我想制作一个分为 2 个部分的首页（一个部分的页面宽度为 1/2），每当有人将鼠标悬停在一个部分上时，它应该占用页面宽度的 2/3。 当一个部分被点击时，它应该占据整个页面的宽度。

  • HTML / CSS / JavaScript：

    const leftPanel = document.getElementsByClassName('panel--left')[0];
    const rightPanel = document.getElementsByClassName('panel--right')[0];

    const mouseEnterHandler = e => {
        e.target === leftPanel ? leftPanel.style.flexGrow = '2' : rightPanel.style.flexGrow = '2';
    };

    const mouseLeaveHandler = e => {
        e.target === leftPanel ? leftPanel.style.flexGrow = '1' : rightPanel.style.flexGrow = '1';
    };

    const clickLeftPanelHandler = e => {
            leftPanel.style.flexGrow = '1';
            rightPanel.style.flexGrow = '0';
            e.stopPropagation();
    };

    const clickRightPanelHandler = e => {
        leftPanel.style.flexGrow = '0';
        rightPanel.style.flexGrow = '1';
        e.stopPropagation();
    };

    leftPanel.addEventListener('mouseenter', mouseEnterHandler);
    rightPanel.addEventListener('mouseenter', mouseEnterHandler);

    leftPanel.addEventListener('mouseleave', mouseLeaveHandler);
    rightPanel.addEventListener('mouseleave', mouseLeaveHandler);

    leftPanel.addEventListener('click', clickLeftPanelHandler);
    rightPanel.addEventListener('click', clickRightPanelHandler);
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

.panel {
    display: flex;
    flex-direction: column;
    height: inherit;
    justify-content: space-around;
    padding: 25px;
    transition: flex-grow 0.75s ease;
}

.panel--left {
    background-color: #ffffff;
    flex-grow: 1;
}

.panel--right {
    background-color: #dddddd;
    flex-grow: 1;
}

.panel--left:hover,
.panel--right:hover {
    flex-grow: 2;
}

.panel--left:active,
.panel--right:active {
    flex-grow: 1;
}

.panel__title {
    color: #3a424a;
    font-family: 'Roboto Mono', sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1em;
    margin: 0 0 45px 0;
    text-transform: uppercase;
}

.panel__header {
    color: #3a424a;
    font-family: 'Roboto', sans-serif;
    font-size: 48px;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 60px;
    margin: 0 auto 55px;
    max-width: 525px;
    text-transform: capitalize;
}

.panel__description {
    color: #6d7d8c;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 30px;
    margin: 0 auto 50px;
    max-width: 625px;
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<main>
    <div class="container">
        <section class="panel panel--left">
            <div class="panel__text-content">
                <p class="panel__title">Sample text</p>
                <h1 class="panel__header">Sample text</h1>
                <p class="panel__description">Phasellus nec semper ex, ac mollis eros. Maecenas diam nunc, iaculis id est vel, laoreet pulvinar nisl. Aenean vestibulum auctor nulla, a vulputate nibh mollis nec. Sed odio arcu, laoreet nec nulla quis, ornare tincidunt urna. Phasellus pellentesque quam sit amet erat consectetur dapibus.</p>
            </div>
        </section>
        <section class="panel panel--right">
            <div class="panel__text-content">
                <p class="panel__title">Sample text</p>
                <h1 class="panel__header">Sample text</h1>
                <p class="panel__description">Phasellus nec semper ex, ac mollis eros. Maecenas diam nunc, iaculis id est vel, laoreet pulvinar nisl. Aenean vestibulum auctor nulla, a vulputate nibh mollis nec. Sed odio arcu, laoreet nec nulla quis, ornare tincidunt urna. Phasellus pellentesque quam sit amet erat consectetur dapibus.</p>
            </div>
        </section>
    </div>
</main>
</body>
</html>

问题是我不知道如何使第二部分缩小到 0。我知道 flex-grow 的工作原理，但这是我能得到的最接近的外观。

希望我能理解地表达自己。

【问题讨论】：

    标签： javascript html css flexbox


    【解决方案1】：

    只需设置width: 0，点击第二部分时不要忘记padding: 0

    【讨论】：

    • 我试过了，但它看起来很“不稳定”：codepen.
    【解决方案2】：

    我对样式进行了更改，使悬停和单击分别达到 2/3 和 100%（目前为面板添加了 - 左侧，但您也可以为右侧面板复制相同的内容。）。 您只需要执行以下操作：

    1. 在单击元素时附加“已单击”类。

    希望这会有所帮助。

    PS：你看到的滚动条是因为标题字体大小。但我认为您将在较小的视口中处理字体。

    干杯， 阿肖克

    * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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


.panel {
     height: inherit;
    display: inherit;
    padding: 25px;
    width:50%;
}

.panel--left {
    background-color: #ffffff;
   
}

.panel--left:hover{
   flex: 0 0 66%;
}

.panel--left.clicked{
   flex: 0 0 100%;
}

.panel--left.clicked+.panel--right{
   display:none;
}



.panel--right {
    background-color: #dddddd;
    
}

.panel__title {
    color: #3a424a;
    font-family: 'Roboto Mono', sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1em;
    margin: 0 0 45px 0;
    text-transform: uppercase;
}

.panel__header {
    color: #3a424a;
    font-family: 'Roboto', sans-serif;
    font-size: 48px;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 60px;
    margin: 0 auto 55px;
    max-width: 525px;
    text-transform: capitalize;
}

.panel__description {
    color: #6d7d8c;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 30px;
    margin: 0 auto 50px;
    max-width: 625px;
}
    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<main>
    <div class="container">
        <section class="panel panel--left ">
            <div class="panel__text-content">
                <p class="panel__title">Sample text</p>
                <h1 class="panel__header">Sample text</h1>
                <p class="panel__description">Phasellus nec semper ex, ac mollis eros. Maecenas diam nunc, iaculis id est vel, laoreet pulvinar nisl. Aenean vestibulum auctor nulla, a vulputate nibh mollis nec. Sed odio arcu, laoreet nec nulla quis, ornare tincidunt urna. Phasellus pellentesque quam sit amet erat consectetur dapibus.</p>
            </div>
        </section>
        <section class="panel panel--right">
            <div class="panel__text-content">
                <p class="panel__title">Sample text</p>
                <h1 class="panel__header">Sample text</h1>
                <p class="panel__description">Phasellus nec semper ex, ac mollis eros. Maecenas diam nunc, iaculis id est vel, laoreet pulvinar nisl. Aenean vestibulum auctor nulla, a vulputate nibh mollis nec. Sed odio arcu, laoreet nec nulla quis, ornare tincidunt urna. Phasellus pellentesque quam sit amet erat consectetur dapibus.</p>
            </div>
        </section>
    </div>
</main>
</body>
</html>

    【讨论】：

      【解决方案3】：

      我已经编辑了我的代码，如果我没记错的话，你希望“鼠标悬停时，部分将有 2/3 大小，点击时，部分将是全尺寸（页面大小）。”

      要替换的代码：- 

      const mouseEnterHandler = e => {
     e.target === leftPanel ? leftPanel.style.width = '0' : rightPanel.style.width = '0'; 
};

const mouseLeaveHandler = e => {
    e.target === leftPanel ? leftPanel.style.width = '0' : rightPanel.style.widht = '0';
};

const clickLeftPanelHandler = e => {
        leftPanel.style.width= '100%';
        rightPanel.style.display = 'none';
    };  

const clickRightPanelHandler = e => {  
       leftPanel.style.display = 'none';
       rightPanel.style.width = '100%';
     };

      你只需要用我的代码替换javascript的一部分，看看它是否是你需要的。请就我的回答给我反馈。是否有帮助。谢谢...

      【讨论】：

      • 这里是代码，但不是我真正想要的：codepen
      • 所以你想要，鼠标悬停时部分获得 2/3 大小，点击时获得完整大小（页面大小）？
      • 是的，所以我在 2/3 上得到的效果对我有用，但我想要更多的是当用户点击一侧时的重叠效果（所以未选择一侧的文本不会改变它的宽度但将保持在 1/3，而 2/3 边与它重叠，得到 1/1 ）。
      • 你试过我编辑的javascript代码了吗？因为你会有悬停效果和 onclick ，点击的部分将有全宽。我认为它解决了你的问题，对吗？
      猜你喜欢
      • 2015-07-18
      • 1970-01-01
      • 1970-01-01
      • 2011-05-07
      • 2016-12-10
      • 2017-12-31
      • 2015-02-22
      • 2021-07-04
      • 2018-01-12
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode