CODEWITHSUNDEEP
htmlcss
Imesh Chandrasiri
Imesh Chandrasiri

Reputation: 5679

how to use position:absolute with scrolling

I've got the following div with the CSS for it in my HTML. I've fixed the div to the bottom of my page. I've designed my html content to be responsive and rearrange when the browser size gets small. 

<div id="button-section">
 <!-- Section for function buttons -->
  <div id="function-buttons">
     <div class="fn-button">
     <!-- Function button -->
       <span>My Current Checks</span>
     </div>
  </div>
</div>



#button-section{
width: 100%;
height: 150px;
position: fixed;
bottom: 0;
background-color: rgb(229, 229, 255);
min-width:1000px;
}

#function-buttons{
width: 70%;
height: 100%;
float:left;
min-width: 870px;
}

when I reduce the size of the browser, it only generates the horizontle scroll bar to show the fluid content! so the fixed content is half shown in the browser! I've displayed the scenario in the following image. How can I get the browser to accept the fixed content and show the exact amount with the scroll bar.

I tried putting it on relative mode but it doesn't work!

without scrolling

enter image description here

Upvotes: 0

Views: 163

Answers (2)

Ravi Trivedi
Ravi Trivedi

Reputation: 2360

First of all, position "Fixed" or "Absolute" does not work with scroll. Once you make it Fixed or Absolute, the child is no longer confined to its parent relativity and is removed out of the parent flow because of the fixed position. Make the position:relative to the parent if you want it to scroll.

Regards, Ravi

Upvotes: 1

michael t
michael t

Reputation: 390

I'm not sure if I totally understand what the issue is — perhaps the scrollbar is the issue? If that's the case then you might want to reduce the min-width value to something significantly less than 1000px. By setting min-width, you're declaring that this section should be no less than x. And in this case, x = 1000px. That's why you're getting a scrollbar.

You need to remove that min-width value for starters. Beyond that you'll have to evaluate your options for determining the width of the browser, perhaps using jQuery something along the lines of:

<script type="text/javascript">
$(document).ready(function(e) {
    var windowWidth = $(document).width();
    $('#button-section').css('min-width', windowWidth+'px');
});
</script>

Upvotes: 1

Related Questions