rain13 Posted February 5, 2017 Share Posted February 5, 2017 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 More sharing options...
WoHe Posted February 6, 2017 Share Posted February 6, 2017 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 More sharing options...
Ingolme Posted February 6, 2017 Share Posted February 6, 2017 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now