Get element width

Question

.red { background: red } .black { background: black; padding: 0 !important } .green { background: green } div { padding: 10px; height: 100vh } form { background: blue; padding: 5px; position: fixed; bottom: 0; width:inherit }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <div class="row"> <div class="col col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12 red"> Текст </div> <div class="col col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 black"> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <form>Форма ввода</form> </div> <div class="col col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12 green"> Текст </div> </div> </div>

In the container there is an input form. The length of this form inherits the length of the parent, but only in the code. Actually transcends.

This is due to the fact that the form has position: fixed. Without it, everything is fine. How to fix?

You do not need to recalculate anything in JS, use absolute positioning for the form.

Vitaly Shebanits Vitaly Shebanits 2.133 five 17 · Accepted Answer · 2019-05-13T06:29:43

 <!doctype html> <html lang="en"> <head> <title>Title</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <style> div { height: 100vh; } </style> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12 bg-danger"> Текст </div> <div class="col col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 bg-dark text-white"> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div> <div class="col col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12 bg-info"> Текст </div> </div> <footer class="fixed-bottom"> <form class="col-12 col-lg-6 m-auto p-2 bg-warning"> <input type="text" class="btn-block form-control" /> </form> </footer> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>

klifort klifort 1,078 five 18 · Answer 2 · 2019-05-13T06:18:24

fixed positions itself against the viewport. The viewport always remains fixed, so you get the effect you make. In this case, whenever you "inherit" any width, it will correspond to the file view.

Can be solved with JS or given a fixed width via CSS

 function fixedBlock(){ var parentwidth = $("div.black").width(); $("form.fixed").css('width', function(){ return parentwidth }); }; $(document).ready(function(){ fixedBlock(); }); $( window ).resize(function() { fixedBlock(); });

 .red { background: red } .black { background: black; padding: 0 !important } .green { background: green } div { padding: 10px; height: 100vh } form { background: blue; padding: 5px; position: fixed; bottom: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <div class="row"> <div class="col col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12 red"> Текст </div> <div class="col col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 black"> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <form class="fixed">Форма ввода</form> </div> <div class="col col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12 green"> Текст </div> </div> </div>

The page loads dynamically, so using JS is not an option - Denis

Answer 3 · 2019-05-13T06:24:37

Here you can (need to) do without the bootstrap ... the input field can simply, regardless of the parent, have exactly the same width as the parent.

 *{margin: 0; padding: 0;} .row-block {display: flex; justify-content: center;} .center-block { width: 50%; max-width: 600px; height: 100vh; background-color: black; color: #ddd; } .left-block { width: 25%; max-width: 300px; background-color: #c00; } .right-block { width: 25%; max-width: 300px; background-color: green; } .moo { margin: auto; left: 0; right: 0 /* - обеспечивают центрирование*/ position: fixed; margin: auto; left: 0; right: 0; bottom: 0; width: 50%; max-width: 600px; height: 40px; background-color: #045acf; color: #eee; }

 <div class="container"> <div class="row-block"> <div class="left-block"> Текст </div> <div class="center-block"> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <form class="moo">Форма ввода</form> </div> <div class="right-block"> Текст </div> </div> </div>

So your form goes beyond the boundaries of the central container
@Olimp ES corrected ... this is due to the additional margins of the local editor)
Здесь можно (нужно) обойтись и без бутстрапа... - I can not, the whole project is built on Bootstrap
@OlimpES if the whole project is built on a bootstrap, this does not mean that it is impossible without him .... you just need to stop using his classes and build everything on your own

Get element width

3 answers 3

More articles: