Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Thanh cố định dưới

Ghim hành động quyết định vào đáy màn hình, để không ai phải đọc hết trang dài mới bấm được.

Bố cục

Xem trước trực tiếp

Nguồn

<div class="dc-stickyshell">
  <div class="dc-stickyshell__page">
    <p class="dc-stickyshell__line">용접 보조 — 경기 화성</p>
    <p class="dc-stickyshell__line">주 5일 · 오전 8시 ~ 오후 5시</p>
    <p class="dc-stickyshell__line">기숙사 제공, 점심 제공</p>
    <p class="dc-stickyshell__line">E-9 비자로 지원할 수 있습니다.</p>
    <p class="dc-stickyshell__line">교육 2주, 교육 기간에도 일당이 나옵니다.</p>
    <p class="dc-stickyshell__line">아래로 내려도 바는 자리에 남아 있습니다.</p>
  </div>
  <div class="dc-stickybar">
    <div class="dc-stickybar__info">
      <span class="dc-stickybar__label">월급</span>
      <strong class="dc-stickybar__price">280만원</strong>
    </div>
    <div class="dc-stickybar__actions">
      <button type="button" class="dc-stickybar__btn dc-stickybar__btn--ghost">저장</button>
      <button type="button" class="dc-stickybar__btn">지원하기</button>
    </div>
  </div>
</div>
.dc-stickyshell { position:relative; display:flex; flex-direction:column; height:300px; overflow:hidden; border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-bg); font-family:var(--dc-font); }
.dc-stickyshell__page { flex:1 1 auto; overflow-y:auto; padding:var(--dc-4); }
.dc-stickyshell__line { margin:0 0 var(--dc-5); font-size:14px; line-height:1.6; color:var(--dc-text-sub); }
.dc-stickybar { position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:var(--dc-4); padding:var(--dc-3) var(--dc-4); padding-bottom:calc(var(--dc-3) + var(--dc-safe-bottom)); border-top:1px solid var(--dc-line); background:var(--dc-surface); box-shadow:var(--dc-sh-2); }
.dc-stickybar__info { display:flex; flex-direction:column; min-width:0; }
.dc-stickybar__label { font-size:12px; color:var(--dc-text-mute); }
.dc-stickybar__price { font-size:17px; font-weight:700; color:var(--dc-text); }
.dc-stickybar__step { font-size:13px; font-weight:600; color:var(--dc-text-sub); }
.dc-stickybar__actions { display:flex; align-items:center; gap:var(--dc-2); flex-shrink:0; }
.dc-stickybar__btn { min-height:44px; padding:0 var(--dc-5); border:1px solid transparent; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:15px; font-weight:700; transition:background var(--dc-fast); }
.dc-stickybar__btn:hover { background:var(--dc-brand-hi); }
.dc-stickybar__btn--ghost { min-width:44px; background:var(--dc-surface); border-color:var(--dc-line-field); color:var(--dc-text); }
.dc-stickybar__btn--ghost:hover { background:var(--dc-sunken); }
.dc-stickybar--single { display:block; }
.dc-stickybar--single .dc-stickybar__btn { width:100%; }
@media (max-width:480px) {
  .dc-stickybar { flex-wrap:wrap; }
  .dc-stickybar__actions { flex:1 1 auto; }
  .dc-stickybar__btn { flex:1 1 auto; padding:0 var(--dc-3); }
}

Cách dùng

  • Một nút, nhiều nhất là hai — thêm nút thứ ba thì không còn rõ nút nào là chính
  • Đừng để trơ nút; đặt con số cần cho quyết định (tổng tiền, bước) ngay bên cạnh
  • Khi giá hay bước thay đổi, thanh phải đổi theo — thanh này là bản tóm tắt

Điểm cần lưu ý

  • Cộng --dc-safe-bottom vào đệm dưới, nếu không vạch home sẽ che mất nút
  • Giữ vùng bấm từ 44px trở lên, và đừng làm thanh trong mờ đến mức đọc được chữ phía sau
  • Chừa phần đệm dưới trang bằng chiều cao thanh, không thì dòng cuối bị thanh che

Tiếp theo