There is a nested element with a .company-title-wrap drop-down list, which must be set to position: fixed; and at the same time it should occupy 100% of the width of the parent block. At the same time, the parent unit does not occupy 100% of the width of the browser window (bootstrap col-md-8 grid).

If you set the nested block width:100%; then it stretches to the full width of the browser window. If you do not set the width to 100%, it is compressed.

 .company-title-wrap { background: #fff; padding: 5px; font-size: 16px; border-bottom: 1px solid #c2c2c2; text-align: center; position:fixed; width:100%; }

What are the ways to fix the block and ask it the width of 100% of the parent block?

Full code

  • As far as I know, it is necessary to use javascript. Absolute positioning does not take into account some properties of the parent elements. - ilyaplot
  • the fixed block only works with the main window and its dimensions. If you set the width and height to 100%, they will be taken from the window. If you need to make a fixed window, you need to take using javascript size of the desired window and assign them. But it is not clear why you need it, and why you use fixed blocks like this - Vasily Barbashev
  • clear. means to solve this problem without js is indispensable ... thanks. - Marina Voronova

2 answers 2

You can achieve a similar result differently: fix not the element inside the block, but the container with this element inside the page.

  1. Create a separate container, fix it and stretch it to the width using left:0; right:0; left:0; right:0; .
  2. Inside the container, place a row with a bootstrap column identical to our “parent” block.
  3. Place a drop-down list with buttons in this column.

Check the result, please: https://jsfiddle.net/glebkema/n4dz6g8q/

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); .fix-it { left: 0; position: fixed; right: 0; z-index: 20; } .fix-it > div { background: #fff; } .add-padding { padding-top: 60px; } .company-title-wrap { padding: 5px; font-size: 16px; border-bottom: 1px solid #c2c2c2; text-align: center; width: 100%; } .clearfix { clear: both; width: 100%; } .company-title-wrap a { border-bottom: none; font-weight: 600; line-height: 2.5; } .company-title-wrap .icon-caret { display: inline-block; background-position: -29px -1247px; vertical-align: middle; width: 8px; height: 5px; } .company-title-wrap .bttn { height: 40px; width: 40px; float: right; } 
 <div class="container fix-it"> <div class="row"> <div class="col-md-8"> <div class="company-title-wrap dropdown"> <div class="company-title-button-wrap"> <button type="button" class="bttn active"><span class="icons icon-bttn-mapping"></span></button> <button type="button" class="bttn"><span class="icons icon-bttn-option"></span></button> </div> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> dropdown <span class="icons icon-caret"></span> </a> </div> </div> </div> </div> <div class="container"> <div class="row add-padding"> <div class="col-md-8"> <div class="group-list"> <div class="group-list-item clearfix"> <a href=""> <span class="pull-left"> <b>list</b> <div>list</div> </span> <span class="pull-right">в отпуске</span> </a> </div> <div class="group-list-item"> <a href=""> <b>list</b> <span class="pull-right"><span class="icons icon-phone"></span> 25-354</span> <div>list</div> </a> </div> <div class="group-list-item"> <a href=""> <b>list</b> <span class="pull-right"><span class="icons icon-phone"></span> 25-354</span> <div>list</div> </a> </div> <div class="group-list-item"> <a href=""> <b>list</b> <span class="pull-right"><span class="icons icon-phone"></span> 25-354</span> <div>list</div> </a> </div> <div class="group-list-item"> <a href=""> <b>list</b> <span class="pull-right"><span class="icons icon-phone"></span> 25-354</span> <div>list</div> </a> </div> <div class="group-list-item"> <a href=""> <b>list</b> <span class="pull-right"><span class="icons icon-phone"></span> 25-354</span> <div>list</div> </a> </div> </div> </div> </div> </div>

  • Thanks for the decision. but did not help. block stretches the entire width of the browser window - Marina Voronova
  • @MarinaVoronova Can you see the code in which you try this solution? - Gleb Kemarsky
  • Your code is also working (but I did not manage to apply). decided to use jquery - Marina Voronova
  • @MarinaVoronova Sorry, just now noticed your comment. If you show your code, I'll try to help. How is it different from your feedl ? And look at the version of the same solution on the English-language site . It may be more convenient. - Gleb Kemarsky

Made using jQuery:

 $(window).resize(function() { $('.company-title-wrap').css('width', $('.row.changed').width()); });

Full code

UPD

This method only works if you change the width of the window. When you open the page on the mobile device. The script does not work (because the width does not change there). How to make the script work instantly, without waiting for the window width to change?

Something like this:

 $(document).ready(function() { $(window).resize(function () { $('.company-title-wrap').css('width', $('.row.changed').width()); }); });

What needs to be changed to make it work?

  • one
    function resize() { $('.company-title-wrap').css('width', $('.row.changed').width()); } $(document).ready(resize); $(window).resize(resize); - ilyaplot
  • Although I did this myself $ (document) .on ('ready', function () {resize (); $ (window) .on ('resize', resize);}); This allows you to hang the handler on resize after loading the page, and not before. - ilyaplot