CODEWITHSUNDEEP
htmlcssangular
Yamdi
Yamdi

Reputation: 15

Div at bottom - again don't wanna work in angular

i want to make footer in one section with random text inside (gray bar).

Example:

enter image description here

So, code in html looks like this:

:host {
  height: 100%;
  display: flex;
  flex-direction: column;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.toolbar {
  height: 50px;
}

.content {
  padding-top: 7px;
  padding-left: 16px;
}

.footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 100%;
  background-color: lightgray;
}
<mat-toolbar class="toolbar">
  ...
</mat-toolbar>
<div class="content" fxLayout="row" fxLayoutAlign="space-between stretch">
</div>
<div class="footer">
  THIS IS THE FOOTER
</div>
</div>

<div style="visibility: hidden; position: fixed" [style.left]="contextMenuPosition.x" [style.top]="contextMenuPosition.y" [matMenuTriggerFor]="contextMenuTag" [matMenuTriggerData]="{item: fileElements}">
</div>
<mat-menu #contextMenuTag="matMenu">
  ...
</mat-menu>

I tried absolute position, flex, bottom: 0 and other thing, even transorm X and nothing works

Upvotes: 0

Views: 57

Answers (2)

Castle
Castle

Reputation: 427

	:host {
  height: 100%;
  display: flex;
  flex-direction: column;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.toolbar {
  height: 50px;
}

.content {
  padding-top: 7px;
  padding-left: 16px;
}

.footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 100%;
  background-color: lightgray;
  position: fixed;
  bottom: 0;
}

You have to add position: fixed and bottom:0 to .footer class

Upvotes: 1

reisdev
reisdev

Reputation: 3383

I don't know how have you tried to use the position: absolute, but it's the right way to achieve what you want, and it actually works , as you can see below:

:host {
  height: 100%;
  display: flex;
  flex-direction: column;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.toolbar {
  height: 50px;
}

.content {
  padding-top: 7px;
  padding-left: 16px;
}

.footer {
  position: absolute;
  bottom:0;
  left: 0;
  flex-direction: column;
  justify-content: space-between;
  min-width: 100%;
  background-color: lightgray;
}
<mat-toolbar class="toolbar">
  ...
</mat-toolbar>
<div class="content" fxLayout="row" fxLayoutAlign="space-between stretch">
</div>
<div class="footer">
  THIS IS THE FOOTER
</div>
</div>

<div style="visibility: hidden; position: fixed" [style.left]="contextMenuPosition.x" [style.top]="contextMenuPosition.y" [matMenuTriggerFor]="contextMenuTag" [matMenuTriggerData]="{item: fileElements}">
</div>
<mat-menu #contextMenuTag="matMenu">
  ...
</mat-menu>

Upvotes: 0

Related Questions