serghei
iunie 15, 2018, 1:28pm
1
Am nevoie să fac un sidebar cu o particularitate pe care nu sunt sigur de unde s-o apuc. După cum se vede în poză, am un header, o lista si un footer. Footer-ul trebuie să stea mereu lipit de partea de jos a ecranului, iar lista să afişeze un scrollbar când datele de afişat nu mai încap pe verticală.
<html>
<head>
<style>
body {
padding: 0;
margin: 0;
}
.main {
background-color: #dedede;
}
.sidebar {
position: absolute;
background-color: #909090;
width: 300px;
}
.sidebar-header {
background-color: red;
}
.sidebar-orders {
background-color: blue;
overflow-y: scroll;
margin: 0;
}
.sidebar-footer {
background-color: green;
}
</style>
</head>
<body>
<div class="main">
<div class="sidebar">
<div class="sidebar-header">
Header - Orders<br>Line 2<br>Line 3<br>etc
</div>
<ul class="sidebar-orders">
<?php foreach($orders as $order): ?>
<li><?= htmlspecialchars($order->buyer) ?></li>
<?php endforeach ?>
</ul>
<div class="sidebar-footer">
Footer - <?= count($orders) ?> records found<br>Line 2<br>Line 3<br>etc
</div>
</div>
</div>
</body>
</html>
De ce nu urmezi un curs de html, css de ce nu incerci sa inveti de la 0 html si css, asta asa in prima ordine de idei.(eu asa am facut).
serghei:
am un header
serghei:
o lista
//Daca nu e in acelasi div, pofi face o un alt div
// Daca si ocupa un intreg div
How To Create a Custom Scrollbar daca aplici asa ceva doar pe div-ul pentru lista oare ce se intampla ?
serghei:
un footer
// Am inteles in unele situati nu e ok.
De ce nu arunci o privire :
https://www.w3schools.com/cssref/pr_class_position.asp si vezi care diferenta intre absolute,relative si fixed.
mirceaciu
iunie 15, 2018, 2:36pm
3
Pentru footer:
footer {
position: fixed;
bottom:0
}
Sau daca footer și restul sunt într-un container: pui position: relative pe container și pe footer
footer {
position: absolute;
bottom:0;
}
Posibil sa fie nevoie și de ‘left: 0’, nu pot testa acum.margin-bottom cu valoare egală cu înălțimea footer-ului.
Pe lista cred că te ajută ‘overflow: scroll’ daca ai înălțime fixa pentru lista.
Nu garantez că merge dar macar îți dă o idee ce poți fac e
Poate te ajuta
Iar cred ca ce este aici seamana cu ce vreihttp://jsfiddle.net/Ve8PL/
serghei
iunie 15, 2018, 4:43pm
5
Să înţeleg că nu se poate face în CSS ce vreau eu decât dacă dau înălţimi fixe header-ului şi footer-ului? De regulă evit tipul ăsta de abordare (dimensiuni/coordonate fixe) inclusiv când dezvolt aplicaţii desktop.
mirceaciu
iunie 15, 2018, 5:34pm
6
Atunci poți folosi flexbox, te poate ajuta sa alinezi cele 3 elemente sa se întindă din margine în margine, probabil header și footer au înălțimi fixe iar lista o lași pe seama flexbox să aibă înălțimea dinamica aplicând proprietatea flex-grow. Mai multe aici https://css-tricks.com/snippets/css/a-guide-to-flexbox/
1 Like
tekkie
iunie 16, 2018, 3:51pm
8
zshare
iunie 16, 2018, 5:35pm
9
Daca foloseste calc() trebuie sa dea inaltimi fixe pe header si footer. Ori calculezi inaltimile cu js, ori flexbox.
tekkie
iunie 16, 2018, 6:33pm
10
nu e neaparat sa le fixeze in pixeli, eu lucrez f bine cu rem, asadar mai usor de facut responsiveness
si primul use case din linkul meu arata inclusiv scroll handling
zshare
iunie 16, 2018, 6:46pm
11
.content {
/* Subtract the header size */
height: calc(100% - 50px);
overflow: auto;
}
iamntz
iunie 16, 2018, 7:20pm
12
Eu aș face așa:
<div class="wrap">
<div class="content"></div>
<div class="footer"></div>
</div>
.wrap {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content{ flex-grow: 2 }
.footer { flex-grow: 0; }
4 Likes
serghei
iunie 17, 2018, 5:10pm
13
Am rezolvat relativ simplu cu flexbox, ce nu ştiam era cum să declanşez overflow-ul, noroc cu @iamntz că a dat exemplul cu “min-height: 100vh”, habar n-aveam că există opţiunea de a mă juca cu viewport -ul
<html>
<head>
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
height: 100%;
display: -webkit-box;
-webkit-box-orient: horizontal;
background-color: yellow;
}
.sidebar {
width: 300px;
-webkit-box-flex: 0;
background-color: #dedede;
}
.sidebar-wrapper {
height: 100vh;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.sidebar-header {
-webkit-box-flex: 0;
background-color: red;
}
.sidebar-body {
overflow: auto;
-webkit-box-flex: 1;
background-color: green;
margin: 0;
}
.sidebar-footer {
-webkit-box-flex: 0;
background-color: yellow;
}
.content {
-webkit-box-flex: 1;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<div class="sidebar-wrapper">
<div class="sidebar-header">
header<br>line1
</div>
<ul class="sidebar-body">
<?php foreach($orders as $order): ?>
<li><?= htmlspecialchars($order->buyer) ?></li>
<?php endforeach ?>
</ul>
<div class="sidebar-footer">
footer<br>line1
</div>
</div>
</div>
<div class="content">
content
</div>
</div>
</body>
</html>
2 Likes
serghei
iunie 18, 2018, 2:21pm
14
Update: un “feature” cretin nu permite utilizarea valorii 100vh pentru height pe Safari-ul de pe iPad…
1 Like
Mulţumesc tuturor pentru sugestii şi ajutor.