Jump to content

How do I tell my statusbar to consume 100% of floating window width?


rain13

Recommended Posts

Hello!

I want to create my own window in html/css/js which I managed. Now I want to have status bar at the bottom of that window. I am stuck with this because I dont know how to make it consume all width of window (not talking about browser's window but about window I created myself).

As I have understood I need position: absolute; to make it stick to bottom. I tried to play with left and right property and even width 100% but nothing helped me. I also dont quite understand why adding position: absolute made my div not to consume all available space. Basically I want my red div to be as wide as it would be without position: absolute; but stick at bottom. The reason for position: absolute; attribute was that bottom didnt work with out it.

How should I solve my issue?

<!DOCTYPE html>
<html>
   <head>
      <title>My cool web app</title>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script src="./jquery.js"></script>
      <script src="./jquery-ui.js"></script>
      <link rel="stylesheet" type="text/css" href="./jquery-ui.css">
   </head>
   <body>
      <p>Some content in web page</p>
      <div id="win" style="border: 1px solid rgb(66, 138, 255); position: fixed; left: 552.25px; top: 233.75px; width: 170px; height: 130px; background: rgb(219, 237, 255) none repeat scroll 0% 0%; right: auto; bottom: auto;" class="ui-draggable">
      <div style="background:#9CF" id="titlebar" class="ui-draggable-handle">
         Window Title
         <div style="float:right; text-align: left;" onclick="$('#win').remove();">
            <img class="icon24" src="./lib/acp/close.png">
         </div>
         <div style="clear:both;">
         </div>
      </div>
      <div id="wincontent" style="height: 100%; overflow:auto;">
      Window content
      <div style="bottom: 0px; left: 0px; right:0ox; position: absolute; width 100%; background:red;">
         Status bar
         <div></div>
      </div>
      <script>
         $("#win").draggable({ 
         containment: 'window', 
         scroll: false, 
         handle: '#titlebar' 
         });
      </script>
   </body>
</html>


Link to comment
Share on other sites

Your typed "right:0ox" instead of "right:0px", maybe this causes the problem, also I don't think the "right:0px" is necessary, by using the following code it should be on the bottom of the page and take up all the available width:

<div style="bottom: 0px; left: 0px; position: absolute; width 100%; background-color:red;">
     Status bar
     <div></div>
</div>

Also you used "background:red" instead of "background-color:red".

Link to comment
Share on other sites

background: red is correct. background is a shorthand for all background properties, including color.

 

I would recommend omitting "px" or any units if you're just setting values to zero. It will make your code shorter, and zero has no units.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...