我有一个侧边菜单和一个内容页面。当侧边菜单可见时,它会将所有内容“移动”到右侧。但是已经在页面右侧的那部分内容会从屏幕上移开(我希望它的表现就像容器的宽度减小一样)
工作示例:https://arturtakoev.github.io/redux-reader/如果您选中其中一个框,然后将菜单移开,您可以在右侧看到“time created”,但如果您打开菜单,则会移出屏幕。
/* Container */
.content {
transition: transform .5s;
padding: 10px;
}
.hidden {
-webkit-transform: translateX(0);
}
.visible {
-webkit-transform: translateX(250px);
}
/*Posts*/
.title {
font-size: 15px;
font-weight: 350;
margin-bottom: 5px;
}
.info {
opacity: 0.54;
justify-content: space-between;
display: flex;
text-overflow: clip;
}
应用程序的JSX:
<div>
<div>
<SideMenu onClick={this.handleSelectSource.bind(this)}
onSelectAll={this.handleSelectAll.bind(this)}
onUnselectAll={this.handleUnselectAll.bind(this)}
/>
</div>
<div className={`${styles.content} ${toggleMenu.isVisible ? styles.visible : styles.hidden}`}>
<div class={styles.hamburger} onClick={this.handleToggle.bind(this)} className={toggleMenu.isVisible ? styles.change : ''}>
<div class={`${styles.bar1}`}></div>
<div class={`${styles.bar2}`}></div>
<div class={`${styles.bar3}`}></div>
</div>
{isEmpty === true ?
<div className={styles.info}>
Select source
</div>
: (posts.length === 0 ?
<div className={styles.info}>
<img src={require('../assets/loading.svg')} />
</div>
: <div ><Posts posts={posts} /></div>
)
}
</div>
</div>
对于内容(帖子)
<div>
<ul className={`list-group list-group-flush`}>
{posts.map((post, i) =>
<a href={post.url} target="_blank" className="list-group-item list-group-item-action flex-column align-items-start" key={i}>
<div className="d-flex w-100 justify-content-between">
<p className={styles.title}>{post.title}</p>
</div>
<div className={`${styles.info}`}>
<small>{post.site}</small>
<small>{time_ago(post.created)}</small>
</div>
</a>
)}
</ul>
</div>
发布于 2018-05-31 19:24:58
您可以通过在.content
具有.visible
类时(即当sidebar
打开时)将其宽度设置为width: calc(100% - 250px)
来解决此问题。
将以下条目添加到CSS:
.content {
transition: transform .5s;
padding: 10px;
width: 100%;
}
.content.visible {
width: calc(100% - 250px)
}
当侧边栏打开时,它将.content
,250px
翻译到右边,迫使它离开屏幕。通过设置上面的属性,您可以使屏幕的总宽度为100% - 250px
(即屏幕宽度减去侧边栏的宽度),因此它不会移出屏幕。
https://stackoverflow.com/questions/50622980
复制相似问题