My goal is to achieve this view here:
Here is my code so far:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
/* 1vh = 1% ot viso4inata na viewport-a */
@media (min-width: 992px) {
.bottom-submit{
margin-top:-50px;
}
.right-full-height{
height:100vh;
overflow:scroll;
}
.left-full-height{
height:100vh;
position: relative;
}
.bottom-submit{
position: absolute;
bottom:5px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 left-full-height" style="border:2px solid red;">
Some shit
<div class="bottom-submit" style="">
<button>Submit</button>
</div>
</div>
<div class="col-md-4 right-full-height" style="border:2px solid green;">
</div>
</div>
</div>
</body>
</html>
This code works fine and satisfy the criteria, but I got an advice that I should not use position:absolute , in my case i am using it in order to be able to put the two buttons i have at the bottom of the screen, so my question is is there other way achieve this, without using the position: absolute the buttons should be at the bottom of course with border, as I am beginner I could not think of any other solution than absolute position
Aucun commentaire:
Enregistrer un commentaire