javascript - 当元素溢出时如何增加元素的高度

标签 javascript html css reactjs

我有一个时间轴组件，其中的数据正在动态设置映射数组。一切工作正常，但是当我添加更多数据时，如果达到最大高度，则应在 y 上溢出的元素不会完全显示。我尝试了一切，但没有得到预期的结果。这是我的CodeSandBox .

我的 scss 文件:

// Mixins
@import "mixins";

// Timeline
// $timeline-color: #ee4d4d;

.timelineWrapper{
    overflow-y: auto;
    min-height: 30vh;
    max-height: 80vh;

}  

#timeline {
    line-height: 1.5em;
    font-size: 14px;
    width: 90%;
    margin: 30px auto;
    position: relative;
    // overflow-x: hidden;
//   overflow-y: scroll;
  
    @include prefix(transition, all .4s ease);
    
    &, 
    *, 
    *:before,
    *:after {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    &:before {
        content:"";
        width: 5px;
        height: 100%;
        background: #26C17E;
        left: 50%;
        top: 0;
        position: absolute;
        
    }

    &:after {
        content: "";
        clear: both;
        display: table;
        width: 100%;
        
    }
    
    .timeline-item {
        margin-bottom: 50px;
        position: relative;
        
        @extend %clearfix;

        .timeline-icon {
            background:white ;
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 50%;
            // overflow: hidden;
            margin-left: -23px;
            @include prefix(border-radius, 50%);



            // .year {
            //  position: relative;
            //  text-align: center;
            //  //transform: translate(50%, 50%);
            // }
        }

        .year {
            position: absolute;
            top:-6px;

            font-family: Open Sans;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 120%;
            //transform: translate(50%, 50%);
        }

        .timeline-content {
            // width: 882px;
            background: #EEEEEE;
            padding: 10px 10px 5px 15px;
            position: relative;
            @include prefix(box-shadow, 0 3px 0 rgba(0,0,0,0.1));
            @include prefix(border-radius, 5px);
            // @include prefix(transition, all .3s ease);

            h2 {
                font-family: Open Sans;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 120%;
                // @include prefix(border-radius, 3px 3px 0 0);
            }

            p{
                font-family: Open Sans;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 150%;
padding-left: 5px;
            }

            &:before {
                content: '';
                position: absolute;
                top: 20px;
                right: -5px;
                width: 14px;
                height: 14px; 
                background-color: #EEEEEE;
                display: block;
                border-radius: 3px;
                transform: rotate(45deg);
            }

            &.right {
                float: right;

                &:before {
                    left: -5px;
                    right: inherit;
                }
            }
        }
    }
}

#timeline {
    // margin: 30px;
    // padding: 5px;;
    margin-left:10px;
    padding: 0;
    
    &:before {
        left: 15px;
    }
    
    .timeline-item {
        .timeline-content {
            // width: 95%;
            // float: right;
            margin-left:70px;
            // margin-left:40px;
            &:before,
            &.right:before {
                left: -5px;
                right: inherit;
            }
        }

        .timeline-icon {
            left: 15px;
        }
    }
}

.year{
    color:black;
    text-align:center;
    margin-top:20px;
}
// @media screen and (max-width: 768px) {
//  #timeline {
//      margin: 30px;
//      padding: 0;
//      &:before {
//          left: 0;
//      }
        
//      .timeline-item {
//          .timeline-content {
//              width: 90%;
//              float: right;
                
//                 &:before,
//                 &.right:before {
//                  left: -5px;
//                  right: inherit;
//              }
//          }

//          .timeline-icon {
//              left: 0;
//          }
//      }
//  }
// }

组件:

<>
 <section>
 <h1>Education</h1>
 <div id="timeline" className='timelineWrapper'>
     {data.map((info)=>(
             <div className="timeline-item">
                 <span className="timeline-icon">
                     <span>&nbsp;&nbsp;</span>
                 <span className="year">{info.date}</span>
                 </span>
                 <div className='timeline-content'>
                 <h2>{info.title}</h2>
                 <p>{info.text}</p>
                 </div>
             </div>
     ))}
 </div>
 </section>
 </>

组件应具有高度等于 30vh* (30%) 且最大高度为 80vh (80%) 的内部滚动:

enter image description here

我需要根据在那里添加的元素数量按比例显示绿色条。请问你能帮帮我吗？ #timeline 是容器，即绿线:

&:before {
        content:"";
        width: 5px;
        height: 100%;
        background: #26C17E;
        left: 50%;
        top: 0;
        position: absolute;

最佳答案

通过在 App.js 中添加带有 timelineContainer 类的 div 并稍微更改 timeline.scss ，我得到了你想要的。这是直播CodeSandbox和代码:

App.js:

import "./styles.css";

export default function App(props) {
  const { data } = props;
  return (
    <section>
      <h1>Education</h1>
      <div className="timelineContainer">
        <div id="timeline" className="timelineWrapper">
          {data.map((info, index) => (
            <div className="timeline-item" key={index}>
              <span className="timeline-icon">
                <span>&nbsp;&nbsp;</span>
                <span className="year">{info.date}</span>
              </span>
              <div className="timeline-content">
                <h2>{info.title}</h2>
                <p>{info.text}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

时间轴.scss:

// Mixins
@import "mixins";

// Timeline
// $timeline-color: #ee4d4d;
 

.timelineContainer{
    overflow-y: auto;
    min-height: 30vh;
    max-height: 80vh;
}

.timelineWrapper {
    line-height: 1.5em;
    font-size: 14px;
    width: 90%;
    margin: 30px auto;
    position: relative;
   
    // overflow-x: hidden;
//   overflow-y: scroll;
  
    @include prefix(transition, all .4s ease);
    
    &, 
    *, 
    *:before,
    *:after {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    &:before {
        content:"";
        width: 5px;
        height: 100%;
        background: #26C17E;
        left: 50%;
        top: 0;
        position: absolute;
        
    }

    &:after {
        content: "";
        clear: both;
        display: table;
        width: 100%;
        
    }
    
    .timeline-item {
        margin-bottom: 50px;
        position: relative;
        
        @extend %clearfix;

        .timeline-icon {
            background:white ;
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 50%;
            // overflow: hidden;
            margin-left: -23px;
            @include prefix(border-radius, 50%);



            // .year {
            //  position: relative;
            //  text-align: center;
            //  //transform: translate(50%, 50%);
            // }
        }

        .year {
            position: absolute;
            top:-6px;

            font-family: Open Sans;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 120%;
            //transform: translate(50%, 50%);
        }

        .timeline-content {
            // width: 882px;
            background: #EEEEEE;
            padding: 10px 10px 5px 15px;
            position: relative;
            @include prefix(box-shadow, 0 3px 0 rgba(0,0,0,0.1));
            @include prefix(border-radius, 5px);
            // @include prefix(transition, all .3s ease);

            h2 {
                font-family: Open Sans;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 120%;
                // @include prefix(border-radius, 3px 3px 0 0);
            }

            p{
                font-family: Open Sans;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 150%;
padding-left: 5px;
            }

            &:before {
                content: '';
                position: absolute;
                top: 20px;
                right: -5px;
                width: 14px;
                height: 14px; 
                background-color: #EEEEEE;
                display: block;
                border-radius: 3px;
                transform: rotate(45deg);
            }

            &.right {
                float: right;

                &:before {
                    left: -5px;
                    right: inherit;
                }
            }
        }
    }
}

#timeline {
    // margin: 30px;
    // padding: 5px;;
    margin-left:10px;
    padding: 0;
    
    &:before {
        left: 15px;
    }
    
    .timeline-item {
        .timeline-content {
            // width: 95%;
            // float: right;
            margin-left:70px;
            // margin-left:40px;
            &:before,
            &.right:before {
                left: -5px;
                right: inherit;
            }
        }

        .timeline-icon {
            left: 15px;
        }
    }
}

.year{
    color:black;
    text-align:center;
    margin-top:20px;
}

关于javascript - 当元素溢出时如何增加元素的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71256797/

上一篇：swift - 退出 SwiftUI 文本编辑器

下一篇：javascript - 使用javascript函数从html下载音频文件

相关文章：

javascript - 如何使用 fetch 从 promise 回调返回？

javascript - 在 .on ('click' ) 事件处理程序中传递函数和函数参数？

javascript - 如何检查身份不明的弹出窗口上的元素？

ruby-on-rails - 移动 CSS 缩略图边框

javascript - HTML5 以低 kbps 录制音频

javascript - 如何用单引号替换嵌套在另一个双引号中的双引号

javascript - 如何在鼠标滚动上移动元素？

html - 你能在这里找到网络安全问题吗？

css - 如何在 Visual Studio 2010 中更改 CSS 文件的字体和颜色？

javascript - 无法根据子元素的高度设置元素的高度

©2024 IT工具网  联系我们