使元素获得整页的宽度

时间：2018-03-17 16:10:49

标签： javascript html css flexbox

我想制作一个分为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是如何工作的，但它是我能得到的最接近的外观。

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

3 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

我已经编辑了我的代码，如果我没有错，你想要“鼠标悬停，部分将有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部分，看看它是否是你需要的。请给我反馈我的答案。如果它有帮助或没有。感谢...

答案 2 :(得分：0)

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

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

    2. 希望这会有所帮助。

    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>

相关问题
最新问题