Jump to content

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


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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...