Mam div
z kilkoma dziećmi:
<div class="content">
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>Some more or less text</p>
<a href="/" class="button">Click me</a>
</div>
i chcę następujący układ:
-------------------
|heading 1 |
|heading 2 |
|paragraph text |
|can have many |
|rows |
| |
| |
| |
|link-button |
-------------------
Niezależnie od tego, ile tekstu jest w p
, chcę trzymać .button
zawsze na dole, nie usuwając go z obiegu. Słyszałem, że można to osiągnąć dzięki Flexbox, ale nie mogę tego uruchomić.
postition: absolute; bottom 0;
?position:relative
- jest głupie, ponieważ myślę, że domyślnie jest względne, ale masz SET, aby zawrzeć absolutne położenie dziecka. Wtedybottom:0
będzie pasować do koloru.static
nie jestrelative
.Odpowiedzi:
Możesz użyć auto marginesów
Możesz więc użyć jednego z tych (lub obu):
Pokaż fragment kodu
Alternatywnie możesz wykonać element przed
a
powiększeniem, aby wypełnić dostępną przestrzeń:Pokaż fragment kodu
źródło
html { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } #site-content { flex: 1; }
height: 100%
na elemencie nadrzędnym, którego próbujesz zepchnąć coś na dnomargin-top: auto;
Możesz użyć display: flex, aby ustawić element na dole, ale nie sądzę, abyś chciał użyć flex w tym przypadku, ponieważ wpłynie to na wszystkie twoje elementy.
Aby ustawić element na dole za pomocą flex, spróbuj:
Najlepiej jest ustawić pozycję: absolutnie na przycisk i ustawić go na
bottom: 0
, lub możesz umieścić przycisk na zewnątrz pojemnika i użyć ujemnego,transform: translateY(-100%)
aby wprowadzić go do pojemnika w następujący sposób:Sprawdź to JSFiddle
źródło
Rozwiązanie z
align-self: flex-end;
nie działało dla mnie, ale to zadziałało w przypadku, gdy chcesz użyć Flex:Wynik
Kod
Uwaga: podczas „uruchamiania fragmentu kodu” należy przewinąć w dół, aby zobaczyć link na dole.
źródło
Nie jestem pewien co do Flexboksa, ale możesz to zrobić za pomocą właściwości position.
zestaw rodzic
div
position: relative
i dziecko elementem, który może być<p>
albo<h1>
etc .. zestawposition: absolute
ibottom: 0
.Przykład:
index.html
style.css
Pióro do kodu tutaj.
źródło
position:fixed
nie działałby, ponieważ wtedy nie byłby związany z pojemnikiem, w którym się znajduje. Być może miałeś na myśliposition:absolute
?Demo: https://codepen.io/ferittuncer/pen/YzygpWX
źródło
Ustawiając ekran tak, aby był elastyczny , możesz po prostu użyć
flex
właściwości, aby zaznaczyć, która zawartość może rosnąć, a która nie.Właściwość Flex
źródło
Spróbuj tego
źródło
Właśnie znalazłem rozwiązanie tego problemu.
dla tych, którzy nie są zadowoleni z podanych odpowiedzi, można wypróbować to podejście z Flexbox
CSS
HTML
źródło