Is there a way to define only fixed width and not height?
Because the position: fixed; is not good for me.
I have a Navbar, which it's background not expanding on the full screen on minimized window (because I have an element defined with pixels bigger than the minimized window width, and when I scroll it is not fixed). position: fixed; is working for the width of the page, but it's not good for the height.
If you want to set a fixed width you can use examples such as the below:
div {
width: 120px;
}
or percentages...
div {
width: 50%;
}
In most cases it's best to use max/min width in order to build to responsive design.
If you want the width to not affect the height then it's best to set both accordingly.
see here for other units of measurement you can use within css:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units
Related
The basic code is simple:
CSS
.pop {
position: fixed ;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
background-color: yellow ; }
HTML
<body>
<div class="pop">some variable text.</div>
</body>
BEHAVIOURS
div.pop expands to fit its contents into a rectangle that, in a
viewport 915px wide, has a maximum width of 457.5px wide, and a
maximum height of 100%.
If the viewport is reduced, "margins" appear on either side of
div.pop, each taking up about a quarter of the viewport width.
Continuing to reduce the viewport width, the width of div.pop then
shrinks. After it has shrunk to the width of its largest word the
proportion of the "margins" starts to shrink, until they disappear,
and the div.pop contents "overflow" the viewport.
GOAL and PROBLEM
I want to have a fixed position, centered DIV that does not exceed
e.g. 95% of the viewport or 30em, whichever is smallest, and that
ideally shrinks to fit content smaller than this, with a minimum width
of 10em. I need to control the behaviours (above) to do this but have
been unable to find an explanation of them.
APPROACHES
I can't find a combination of min-width, max-width, and width
that achieves the goal. min-width achieves the minimum width
requirement, but nothing seems to override the "margins", and maximum
width behaviours of div.pop.
Using display:table-row; and display:table-cell; seems to have no
effect, suggesting the maximum width and "margins" of div.pop are
not the result of anonymous cells.
From stripping out all code except that given here, it looks like the
"problem" comes from an intrinsic set of behaviours. I have been
unable to find a definition of these or way they can be
controlled.
Including/omitting the Meyers reset css has no effect, so browser
presets don't seem to be involved.
FF Inspector displays the width of div.pop onscreen in the popup
associated with it; this width is also shown in the Box Model pane but
no computed width for it is given nor any rules relating to
that.
QUESTION
How are the dimensions of div.pop being calculated and the
behaviours being generated, and how can this be controlled to achieve
a goal like that described?
Try using max-width and setting a media query:
.pop {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: yellow ;
width: 30em;
min-width: 10em;
}
#media (max-width: 30em) {
.pop {
max-width: 95%;
}
}
If you need something more advanced, try using calc (reference).
I have an image tag that I managed to align nicely to the rest of the divs in one section. However, as I resize the window, the image starts shrinking or expanding. What could I do in CSS to prevent this from happening?
.img-test {
width: 33.87%;
position: absolute;
max-width: none;
}
.clothes {
background-color: #d04925;
float: right;
height: 805px;
}
The image and the div with the .clothes class are one next to the other and it should stay that way.
You can use the max-width, min-width, max-height, min-height attributes to prevent the image from resizing. Here's a link with more information. w3schools
Hello and welcome to StackOverflow!
You set your image to a percentage value, or in other words to a fraction of the parent container. So if the parent container shrinks, the fraction of it gets smaller and the image shrinks, too! Now there are ways to prevent this, you could set a min-width, which defines a minimum width for your image. So it will shrink to this width, but it won't shrink below.
.img-test {
width: 33.87%;
min-width: 300px;
}
In this example, your image would never be smaller than 300px. You could also omit the min-width Attribute, and set a fixed width directly. But since you mentioned, that you managed to make it „look nicely“, this will propably wreck your whole UI, if the viewport of the browser is too small.
So I would recommend to consider rethinking your layout, if it only works with some specific widths. One way to do this are media queries. You define breakpoints in your CSS, and if the viewport gets smaller (or bigger), different CSS rules apply. You can read more about this here and here.
Just a small off-topic addition: The default value of max-width is none and it is not inherited, so there is no reason to set it to this value.
You need height attribute to be set to some value to prevent image from resizing. Example
.img-test{
height: 200px;
position: absolute;
min-width: 300px;
width: 33.87%;
}
This will help. Unless the image is inside a div whose height is changing.
Check this FIDDLE
This is like a mobile phone prototype where I have fixed height of 50px for header-div and footer-div.
I want the content-div to dynamically adjust its height according to the main-container (which here is acting as mobile screen size). Adjust in such a way that the content overflow should be scrollable in the visible content-div height only.
If I put header-div and footer-div height both 10% and content-div height 80%. So that it arranges according to the screen size. Trouble here is that the header and footer heights will vary according to screen sizes and as a result will make header-div and footer-div bigger/smaller in height.
This is why I have set a certain height for header-div and footer-div both that is 50px. Now I want the content-div to be adjusted in such a way that it dynamically changes its height in accordance to the main-container (parent div)
Appreciate any help. Thanks.
I tried this and I am not sure if you would like it that way but here's what I've got for you...
Change your CSS code for main-container to this.
.main-container {
width: 420px;
height: auto;
background-color: #f7f7f7;
}
change your css code for main-container
.main-container {
width: 420px;
height: 1.2em; //change as per your requirements
background-color: #f7f7f7;
}
Web Style Sheets
CSS tips & tricks
I have a dynamic-height container (its height is specified in relative measurements), inside of it, two elements - a header, and an img, e.g.:
<div class="item">
<header><h1>Title</h1></header>
<img ... />
</div>
I want the image to show in its entirety. Its css is set with height:100% .
Because of the height that the header takes, the image is clipped a little bit below (it is has an hidden overflown edge), where I want its height to auto adjust (become smaller) to fit inside the container.
There is a solution, where I use calc(100%-[height of header]) for the height of the image, but since calc is not supported in all browsers I was wondering if there is a different more supported solution for this.
Here is a jsfiddle:
http://jsfiddle.net/7xLo7mr6/
(Apply the class fix to the container to apply the calc fix)
Perhaps CSS flex could be your solution for this one:
http://jsfiddle.net/7xLo7mr6/9/
Using flex-direction: column; and applying a max-width to the container (allowing the image to fill in the rest of the height after the header text while not stretching the width) could potentially solve your issue, but might cause you more troubles depending on what you're ultimately after.
Another option: http://jsfiddle.net/7xLo7mr6/11/
apply height: 7%; to the header and height: 93%; to the image
Make the clipping happen at the top of the image instead of the bottom:
http://jsfiddle.net/7xLo7mr6/13/
Apply position: absolute; to the header, give it a background: white; and width: 100%;, then apply a position: relative; to the container so that the header applies a width 100% to the container and not the body.
If you just want the image to shrink when its container shrinks, you can give it a max-width of 100%, and that will stop your image from growing so large it exceeds its container.
.item img {
height: 100%;
max-width: 100%;
}
It might be important to note that declaring height: 100% does not make elements 100% of the height of their containers, it makes them 100% of their own intrinsic height. The heights of elements are determined by their content, not the other way around. Read a full explanation here: https://stackoverflow.com/a/5658062/4504641.
http://jsfiddle.net/ingridly/337wrgj8/1/
I'm trying to use a side panel with a width of 20% and a height of 100% so that they will re-size depending on browser width and height etc. I'm having a problem with the height (100%) part of the CSS, it doesn't seem to fit the entire height of the browser window though - it just displays 100% of what's in the side panel.
How can I make the side panel reach the bottom of the page no matter how much content is inside of it?
#sidebar{
float:left;
position: relative;
width: 20%;
height: 100%;
background-color: red;
}
Height 100% is always a pain.
Make sure that, html, body also have height: 100% and any div that's wrapping it.
When you set something with percentages, you must always consider "percent of what?" It's always the parent of the element. So what is the parent set to? If there is no defined height in units for the parent, percentage has no reference.
I had the same problem on a project I was working on, I fixed it thus:
#sidebar{
min-height:100%;
height:auto !important;
height: 100%;
//add other styling needed
}