时间戳

首页 > 解决方案 > 到达 div 末尾时是否可以设置“border-radius”？

html - 到达 div 末尾时是否可以设置“border-radius”？

问题描述

标签： htmlcss

解决方案

您可以通过将顶部间距设置为父级并将底部间距设置为子级来实现。

  • 使父级可滚动
  • 隐藏父滚动条（因为滚动条在视觉上接触到窗口底部边缘）
  • 为子元素添加一个margin-bottom

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

body {
  background: #0fb;
}

.Popup {
  position: fixed;
  width: 70vw;
  top: 15vh;
  left: 15vw;
  bottom: 0vh; /* has to be at 0! */
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none; /* FF https://stackoverflow.com/a/49278385/383904 */
  -ms-overflow-style: none; /* IE 10+ */
}

.Popup::-webkit-scrollbar { /* WebKit */
  width: 0;
  height: 0;
}

.Popup-content {
  padding: 20px;
  height: 150vh;   /* Demo only... you place text inside */
  margin-bottom: 15vh; 
  border: 10px dashed #000;
  background: #0bf;
}
<h2>Lorem Ipsum</h2>
<div class="Popup">
  <div class="Popup-content">
    Scroll...
  </div>
</div>

如果不隐藏滚动条，我认为在纯 CSS 中没有任何明智的解决方案，而不是不使用一些 JavaScript。

推荐阅读