I need to design a webpage where each div element fits the browser window.
Here's what I have right now:
http://jsfiddle.net/E9HER/
What I need to do is to have each of those red-bordered containers to vertically fit the browser window (for heights greater than 500px).
<div class="contentcontainer">
<div class="WhoWeAre"><a name="WhoWeAre">Who we are</a></div>
<div class="WhatWeDo"><a name="WhatWeDo">What we do</a></div>
<div class="OurWork"><a name="OurWork">Our work</a></div>
<div class="Contact"><a name="Contact">Contact</a></div>
</div>
Any suggestions or help would be greatly appreciated.
you can set
.wrapper {min-height:500px;
height:100%;}
.contentcontainer {
height:85%;
min-height:500px}
apply the contentcontainer properties to the containing divs as well...
You will have to play around with the % to come to a proper height.
This will scale the divs to the browser window, but will set it to 500px for windows below that...
Related
content only takes 1/3 of it's while size, do you have any tips or any suggestions on how to make this take it's whole width? I did also put a width of 100% but still doesnt
Have you checked if the element you are trying to make 100% is within another element with a set width?
Example:
<div id="parent" style="width:700px">
<div id="child" style="width:100%"></div> /* the width of the "child" is 700px due to the constraint of the parent*/
</div>
I'm using angular2-draggable module to resize div vertically. You can see this demo: https://xieziyu.github.io/angular2-draggable/#/resizable/default, in the Resizable Demo area.
What I wanted is, when resize the top div，the below div height decrease or increase, instead of move down. That is, this whole page height never change, just two div heights mutual adjustment. Is there anyone knowing how to do this?
You can easily achieve this with some simple css. Create a parent container that covers the full page, apply a flex-box style with column direction, and make the bottom element automatically resize to fit available space. e.g.
<div class="container" style="height:100%; display:flex; flex-direction:column">
<div ngResizable>
...
</div>
<div class="bottom-div style="flex:1">
...
</div>
</div>
</div>
I'm trying to figure out how to make an element fit (like object-fit) into another div.
That specific element is an Image Container (div.ratio-box), which has a intrinsic aspect ratio css (the padding bottom hack to avoid page jump).
The problem is that with portrait image, the Image Container (div.ratio-box) is overflowing the parent (div.slide-cell) . So what I want to do is to calculate a new width base for (div.slide-cell.portrait) on the following known value:
Img Height,
Img Width,
Parent's width
Parent's margin from the browser window
https://jsfiddle.net/5d6zrueh/3/
<div id="slider">
<div class="flickity-viewport">
<div class="flickity-slider">
<div class="slide-cell portrait is-selected">
<div class="ratio-box centered" style="padding-bottom:150.06002401%;">
<img src="http://via.placeholder.com/166x250">
</div>
</div>
</div>
</div>
Hope it makes sense to you.
I have a page where I want an element to align right at the same time I have elements which may be wide and cause a horisontal scrollbar. For instance:
<body>
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</body>
This works fine if the wide element fits within the browser window. But if the browser window is too small so that a horisontal scrollbar appears the "stay right" element will align with the window and not the page:
If I move the scrollbar the "stay right" element moves and doesn't really align to anything.
If a add a table around the whole page it does what I wan't:
<body>
<table width="100%"><tr><td>
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</td></tr></table>
</body>
The "stay right" element will align with the right side of the wide child element regardless of browser window size.
Edit: The table based solution above will align right to largest of the width of the wide child element or the window width. Effectively this gives the page a "minimum width" which is determined by the contents of the page (ie. the wide child element). This is what I want - which isn't clear from the original text, sorry.
I am wondering if there is a better way than wrapping the entire page in a table.
That is a very interesting problem. It actually happens because the computed width on div matches the window size (and body size) instead of the width of the text. The floating text looks to it's container for a width/height when rendering (and because that computed value is actually size of the window, the float stops at the edge of the window).
This does not really occur often because most sites use something like grid960/foundation/etc and a min/max width are provided (you probably figured out that setting a width will fix your problem).
I don't know of a really good solution for dynamically sized text (with only css)... The only thing I can think of without using a table would be to use a clearfix. It is really used/created for element with floating children (in order to give them a correct width/height.. floating elements do not normally effect the containers dimensions) but it also will work in this case.
<body>
<div class="clearfix">
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</div>
</body>
EDIT: I lied, I came up with a second (better) way but it does require a more modern browser. It is to use a wrapper with a display: inline-block OR display: table. It really is just a sub-set of the clearfix but will work if you can get away with being IE8+ based.
<body>
<div style="display:inline-block">
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</div>
</body>
NEVER wrap an entire page in a table. It messes up your HTML since about the year 2000.
I think you want a fixed position for your div, it lines up the element with the window instead of the page:
.myDivThatFloatsRight {
position: fixed;
top: 10px;
right: 10px;
}
How to split screen with three divs by following demands:
- main div should cover whole screen (100%x100%)
- sub div after div should cover main div( each sub div = 33% )
I tried to do it as following :
<div style="width:100%; height :100%; background-color:Lime;">
sss
<div style="width:100%; height:34%; background-color:Blue;">
a
</div>
<div style="width:100%; height:33%; background-color:Gray;">
b
</div>
<div style="width:100%; height:33%; background-color:Aqua;">
c
</div>
</div>
You need to set height of body and html to 100%. See this fiddle.
I think your main source of confusion is that your 'main' div is only going to take up as much space as it needs to satisfy the style requirements. It will take 100% of the size of the parent element, but if that size is not defined, it only grows to the minimum size required by whatever it contains.
In this fiddle, I just wrapped your code in a div defined to be 200px high, and it seems to work fine (however, note that the 100% is actually diminished by the fact that 'sss' is included in the main div, before the contained divs).
If you want to remove the white margin, set the style to "margin:0" on the body tag.
Use the display: flex and make sure to set 33% as your width for each, that way you make sure that the three of them occupy 1/3 of the screen