<body>
<div id="outerwindow" style= "position:absolute ;width:100%;height:100%" >
<div>
<canvas id="g_Painter" style="position:relative;width:100%;height:80%"></canvas>
</div>
<div id="g_Toolbar" >
</div>
div id="innerdiv" >
</div>
</div>
</body >
Here all div contains some components..Only outer layout I have shown.
My requirement is the canvas div should occupy the 80% height of parent div "outerwindow" .Problem I am facing is irrespective of whatever width and height I specify to canvas, height is only almost half of the outerwindow.But width is 100% of the outerwindow.Kindly help.
change g_Painter position style to absolute
<body>
<div id="outerwindow" style= "position:absolute;width:100%;height:100%;" >
<div>
<canvas id="g_Painter" style="position:absolute;width:100%;height:80%;"></canvas></div>
<div id="g_Toolbar"></div>
<div id="innerdiv"></div>
</div>
</body>
Related
I'm trying to set some divs to width: 100% on Twitter Bootstrap 3 (including no paddings or margins).
JSfiddle: http://jsfiddle.net/rq9ycjcx/
HTML:
<div class="container">
<header>
<div class="row">
<div class="col-md-2">
<img src="http://placehold.it/150x50">
</div>
<div class="col-md-10">Menu</div>
</div>
<div class="row gray">
<div class="col-md-6">
<h1>Page Title</h1>
</div>
<div class="col-md-6">
<div class="breadcrumbs">Main page > page </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/350x150" />
</div>
</div>
</header>
<footer>
<div class="row">
<div class="col-md-12">Content</div>
</div>
<div class="row dark">
<div class="col-md-3">Footer 1</div>
<div class="col-md-3">Footer 2</div>
<div class="col-md-3">Footer 3</div>
<div class="col-md-3">Footer 4</div>
</div>
</footer>
</div>
What is the right way to get image http://placehold.it/350x150 width: 100%, including no paddings or margins?
Page title and breadcrumbs height is 80px.
If I resize window to smaller screen (e.g. mobile), text Main page > page disappears (it's somewhere but not on own row).
How to fix it?
Use <div class="container-fluid">. As per Bootstrap Docs: Use .container-fluid for a full width container, spanning the entire width of your viewport.
There is 0 padding on container-fluid.
In your code you have what appears to be body content in your header and you also have a div class="container" outside of your header and footer. This is not correct, you should have your container/container-fluid inside of your body. Also for your header you should use <nav="nav navbar-nav">.
Updated Fiddle
As suggested above, you can create a helper class
.padding-0 {
padding: 0;
}
and apply it to any HTML elements for which you need a padding reset. So in your case, it would look like this:
<div class="row">
<div class="col-md-12 padding-0">
<img src="http://placehold.it/350x150" />
</div>
</div>
For the second problem, set height of .gray class to auto :
#media () {
.gray {
height: auto;
}
}
Note: You could also remove line-height: 80px, it's optional :)
http://jsfiddle.net/rq9ycjcx/8/
There is no "right" way to do that in Bootstrap 3. It means you have to reset padding for the exact column.
You can create a class such as this one:
.col-md-12.resetPadding { padding:0px }
About Main page > page disappearing, I don't see this problem on my browsers (tested on Chrome and FF), but you have line-height: 80px there and as you said your breadcrumbs div has height: 80px;, so try to reduce line-height property and see how it works.
A simple way would be to remove the <div class="col-md-12">...</div> and add your content directly inside the row tag. The row tag removes the left & right gutters, whereas the cold-md-12 essentially adds the gutters back in.
The Bootstrap 3 documentation says that for single full width items you don't need any markup, eg just wrap it in <p> tags. However this will show the 15px gutters due to the page markup. So by simply adding in the row tag and placing your content directly inside this you will get 100% width content and be compliant with the BS3 documentation.
I've written this code:
<body>
<div>
<div style="padding:10px;float:left;height:500px;background-color:#ff6a00;">
Div1 -> Floated
</div>
<div style="padding:10px;height:600px;background-color:#5c64bb;display:-webkit-flex">
Div2 -> Not Floated
</div>
</div>
And result is the below image, I could achieve this result with using -webkit-flex display which works just in chrome, is there any idea which can give me the same result.
By the way, I don't want to use margin-left for Div2 and position absolute either.
If you don't mind specifying a static width for your left side you can achieve the flex type layout for the right with this:
<div style="display:table;width:100%;">
<div style="display:table-cell;width:130px;vertical-align:top;">
<div style="padding:10px;height:500px;background-color:#ff6a00;">
Div1
</div>
</div>
<div style="display:table-cell;vertical-align:top;">
<div style="padding:10px;height:600px;background-color:#5c64bb;">
Div2
</div>
</div>
</div>
http://jsfiddle.net/LHZKp/
I was able to get a similar effect using display: inline-block; on the second div and percentage widths.
<div>
<div style="padding:10px;float:left;height:500px;background-color:#ff6a00;width:15%;">
Div1 -> Floated
</div>
<div style="padding:10px;height:600px;width: 80%;background-color:#5c64bb;display:inline-block;">
Div2 -> Not Floated
</div>
</div>
fiddle
Hello I'm trying to create a navigation bar which is made up of several div containers in one big navigation div.
I'm not sure if my approach is right but I tried to do it like this:
<div id="navigation">
<div class="innen">
<div class="logo">
<img class= "logo" src="logo.png" title="Logo"/>
</div>
<div id="bar">
<!-- Navigation Items are in here --!>
</div>
<div id="gamecard">
<!-- Another right floated Element !-->
</div>
</div>
<div class="unten">
<p>You are here: Main</p>
</div>
</div>
I wanted to push down the bar div to meet the height of the image by using top padding:
#bar{
padding-top: 80px;
}
But now it moves the down gamecard container too. How can I prevent this from happening?
I also added a jfiddle:
http://jsfiddle.net/Cv4p2/
try using position:absolute
<div id="bar" style="position:absolute; padding: 80px 0 0 0">
</div>
Padding is intended to add a cushion inside the container in which you implement it. It appears that you would benefit from using margin. You should replace "padding-top: 80px;" with "margin-top: 80px;" and you would achieve the desired effect.
I have a container div which has text within it that I want centered. I want to also insert a div into the container which floats to the right, like this:
<div id="container" style="text-align:center">
Text
<div id="child" style="float:right"></div>
</div>
Unfortunately what happens is that the text is no longer centered with respect to the container, but is instead shifted to the left by the width of the child.
Does anyone know how to get the text to center whilst keeping the div contained to the right?
Something like this...
<div style='position:relative;'>
my centered text
<div style='position:absolute;right:0;top:0'>
my right div
</div>
</div>
You can obviously throw the inline styles into CSS.
Posibly this?? Creating 3 equal parts. left middle and right??
<div id="container">
<div id="child1" style="float:right width: 30px;"></div>
<div id="child2" style="float:right width: 30px; text-align:center;">TEXT</div>
<div id="child3" style="float:right width: 30px;"></div>
</div>
How to set a div#wrap height in this situation?
<body style="height:100%;width:100%;overflow:hidden;padding:0;margin:0;">
<div id="header" style="width:100%;height:50px;z-index:5;background:blue;padding:0;margin:0;"> </div>
<div id="wrap" style="width:100%;overflow:scroll;background:red;height:100%;padding:0;margin:0;">
<div id="content" style="width:100%;height:2000px;padding:0;margin:0;">
</div>
</div>
<div id="footer" style="width:100%;height:30px;z-index:5;background:green;padding:0;margin:0;"> </div>
</body>
Is this what you are looking for?
http://jsfiddle.net/nkUwa/1/
try it in Firefox... I don't know a way to make the header and footer a fixed height, and then have the wrap and content the "remaining area" like for the frameset usage... But you can also style the header and footer as position: absolute and attached to the top and bottom of viewport, by using top: 0 and bottom: 0 respectively.
you can't actually set the height of a div height : height:100%, you might want to try min-height:400px!important; _height:400px;