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>
Related
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 am working with vue and trying to make my element responsive so starting with Mobile first approach. I am using normalize.css but i don't think it has anything to do with the issue. The div is not 100% width, it cuts half way through. I am using dev tool mobile tool to emulate the screen to view.
I have attached and jsfiddle for the code.
<div>
<header class="container">
<section>
<img src="https://placeimg.com/400/100/arc" alt="logo">
</section>
<section>
Logo text
</section>
<section>
<h3>Call Us</h3>
<div class="contact__info">
<sub>Mon - Fri</sub>
12345
</div>
</section>
</header>
</div>
The fixed width: 1326px; on your header makes that element stretch wider than the viewport (if the latter is smaller than that), so it overflows out of its parent, but does not stretch the parent itself. And because that parent doesn’t stretch, the 100% with of the div inside it are still only 100% of the viewport width.
What is a header with a fixed width of > 1300px doing in this in the first place, if you want to approach this “mobile first” …? Remove it or make it dynamic as well, otherwise this makes little sense as a test case for the rest of what you are doing to begin with.
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 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...
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