This question already has answers here:
Css height in percent not working [duplicate]
(8 answers)
Closed 6 years ago.
Here is the example i'm testing on :
Bootstrap starter theme
You can try with inspect element.
Why cant i change height of header tag or the background image of it with %?
I have tried using px and it works like that.For example height:800px;
But if i use height:80%; it wont work. Can someone explain how this works ? I don't know what am i doing wrong.
When you are giving height is % value its reffere also to parent of this element. If you want to force header to have 80 % of screen height you have to take it out of the DOM flow by setting it as position:absolute.
So css can look like this :
.header-image {
position: absolute;
height: 80%;
}
Related
This question already has answers here:
How to keep website width fixed (irrespective of screen size)
(4 answers)
Closed 6 months ago.
This post was edited and submitted for review 6 months ago and failed to reopen the post:
Not suitable for this site
So I’m currently working on a basic html web page that requires me to have a static layout and a fixed width of 1000px however when I do that I’m left with space on both the left and right of the page but when it’s on auto my elements such as my nav and other container elements take up the space etc take up the full width. What am I missing ??
Any help would be great! Thanks
I didn't quite understand your question, but I think this is the solution
width:100%;
https://www.freecodecamp.org/news/html-page-width-height
As someone say in the commants, your page is not always x pixel size so It's hard to do but you can still do something like :
body {
width: 1000px;
height: 500px;
}
But the things is that some people have a small screen so they will have a scrollbar or maybe you can use a lot of Breakpoint
This question already has answers here:
Make body have 100% of the browser height
(24 answers)
Closed 4 years ago.
This happens when I resize my window. Anyone know how to make the html fill the browser window??
Try height: 100vh
See documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/length
This question already has answers here:
HTML / CSS - adjust font-size to fill parent height and width
(5 answers)
Closed 6 years ago.
What I need is the text to apear in its maximum size, withiut wrapping or going outside of the screen. I've tried with #media and changing the font-size, but this got too complicated! What I am trying to achieve is, making the faces at example.com appear at their maximum font-size even on mobile devices. The idea here is to not use media queries...
Thry the snippet to view iframe
iframe {
width: 100%;
height: 100vh;
border: none;
}
<iframe src="https://www.example.com/404.shtml">Your browser doesn't support iframes</iframe>
my initial though would be to use the vw property for the font-size. I have created this fiddle to demonstrate how it works. Resize the render screen to see how the font shrinks as the window gets smaller and grows and it gets bigger. You can use media queries to determine the max font size.
For the no-wrapping just add white-space: nowrap; in your css.
This question already has answers here:
How to disable the resize grabber of <textarea>? [duplicate]
(3 answers)
Closed 6 years ago.
So, I'm using the textarea tag and I would like to ask a few things:
1) Any user can change the size of the box, but can it be prevented? If yes, how?
2) Is it possible to (without preventing the size-changing of the box) set the maximum height or width?
Thanks in advance
To disable the resizing of your textarea use resize:none; and to control the max width and height, use max-height and max-width properties in CSS.
textarea.noResize{
resize:none;
}
textarea.heightControl{
max-height:100px;
max-width:500px;
}
<textarea class="noResize"></textarea>
<textarea class="heightControl"></textarea>
To disable resizing of the text area and control the max size add this to your css file :
textarea {
resize: none;
max-height : 100px;
max-width : 100px;
}
Just adjust the pixel values to what you wish it to be. However keep note: this could be annoying to some users if they wish to modify the size of the textarea.
This question already has answers here:
Can media queries resize based on a div element instead of the screen?
(11 answers)
Closed 7 years ago.
So with #media screen - you are able to change CSS depending on screen size. I am looking for a way to change the CSS according to Div size
So if
#menu-logo is > 250px {
do this
} or else {
do that
}
Is there any way to do this with CSS ? I'm trying to make my website responsive. Thanks
You can check with regular media-queries at what point your div will be greater then 250px and just use that value in your media-query. Targeting the div itself will need jQuery though.