I would like to zoom in my react app(coreUI) with 'ctrl+PLUS' in chrome. but I want to ignore the height of the header and footer while zooming, is that even possible?
//html
<div className="ignore-zoom">
<h1>title</h1>
<div>
//css
.ignore-zoom{
width: 100%;
height: 50px fixed !important;
}
I found this https://css-tricks.com/zooming-squishes/ you can try to use "em" base media query to try to solve this.
Related
I have a page with following html markup:
<html>
<head>...</head>
<body>
<div class="container">
<header>...</header>
<div class="wrapper">
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-3 col-md-offset-1 col-aside">
<aside>...</aside>
</div>
</div>
</div>
</div>
</body>
</html>
I set 100% height for:
html, body, body > .container {
height: 100%;
}
.wrapper {
min-height: 100%;
}
.wrapper > .row {
min-height: 100%;
}
.col-aside {
min-height: 100%;
}
So I want that both my columns have minimum height of 100%. While inspecting my page with chrome developer tools I realized that .row and .col-aside don't get 100% height. I am a little bit lost because I saw answers dealing with display: table but I'm pretty sure it's not necessary since I managed to do this layout without bootstrap using just divs and their heights.
So have to stretch columns so that they have min-height: 100% preferably without using display: table and position: absolute?
updated: jsfiddle http://jsfiddle.net/U6H6W/ . Something like that, here you can see that .row doesn't get 100% height in spite of the fact that .wrapper gets 100%
A better solution would be to use viewport height, e.g.:
.col-aside {
height: 100vh;
}
You can easily specify the height of one div, without having to specify the height of the higher level HTML blocks.
Viewport is supported in all modern browsers, and as far back as IE9. IE8 does not support viewport, but if you need legacy support going back that far you can set a fallback to height: 100% (making sure you cover all of the containing blocks.)
Here is a jsbin to demonstrate:
http://jsbin.com/zeyuraka/1/edit
When dealing with heigth:100%, all the parents should be in height:100%. If one isn't, then no child is.
The 100% approach is complicated, especially when it comes to many childs with padding or margins. It could not display what you expect (i.e. exceed screen size).
You could try position: fixed, with bottom:0, but you will have to handle the position of the non-fixed div.
Can anyone enlighten me to why the following occurs with this test case?
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #ffffff;
margin: 0;
padding: 0;
}
.section {
background-color: #000000;
color: #ffffff;
}
.wrap {
width: 960px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="section">
<div class="wrap">Some content here</div>
</div>
</body>
</html>
When the window is big enough to accommodate 960px, everything works as expected.
When the window is resized to smaller than 960px a horizontal scrollbar appears (As expected). However, when scrolling horizontally it appears that the .section div has not been stretched across the document and appears only to be the width of the window, therefore revealing the body's white background.
I would normally expect the black, .section div to stretch across the document since it's display: block by default.
Does anyone know why this is happening and more importantly, how to get the result I expect?
Cheers
It's because the witdth of your section is only as big as what's in it. In this case this means your wrapper which is set to 960px. Setting the section in percentage only works as percentage of the available screen, so width:100% wouldn't solve this. You should set your section width to a specific number and that would fix the issue.
Edit: Use min-width instead of width and it works even better for when you go bigger than you min-width.
section is sizing to it's contents, try setting width:100% on .section
In addition, you may want to add this to .wrap
margin-left:auto;
margin-right:auto;
that will center the wrap div
I have a page where the header is a gradient and on first load everything looks perfectly fine. When I refresh the page the gradient gets messed up and it seems like it puts in 2 gradients (1 really small) example below:
The first one is after a reload and the second is on first hitting the page.
The small gradient on top that I don't want is the same height as the padding in that div.
I've also noticed that imgs get resized on reloads like this as well and I've solved that by setting the height in css. I can't set the height in css because the height should be dynamic.
Can anyone explain to me why this might be happening and a way to solve it? I would really prefer a non-javascript solution because I already know how I might solve using jquery.
Some Code:
HTML:
<header>
<a id="settings-gear" href="#"><img src="/img/gear.png"> </a>
<div id="logo">
<img src="logo" alt="logo">
</div>
</header>
CSS:
header {
background: -webkit-linear-gradient(top, #F0F7F7 0%,#B8D9DD 100%);
max-height: 122px;
padding: 12px;
position: relative;
display: block;
}
header #logo img {
display: block;
margin: 0 auto;
}
header #settings-gear img {
height: 33px;
}
Well, it's difficult if we can't see a link or example, but the first think that comes to my mind is set the background as image and tell it to fit only the content with background-origin:content-box;. Try put that line into the header properties, and hope it helps. Note that the background-origin property don't work in IE 5, 6, 7 or 8...
<div id="top">
*height: auto;
min-height: 100%;*
<div id="content">
*min-height: 500px;*
</div>
<div id="middle">
*css ???*
</div>
</div>
<div id="footer">
</div>
This code works nice when the screen size is normal. But in full screen mode, the footer goes to the bottom of the page (wanted behaviour) but the ''middle'' div must increase its height to get the footer. I mean, the 3 elements (content, middle and footer) must be continuous.
Which css rules should I use to do this behaviour?
Thanks in advance!
UPDATE.
I've used a couple css rules and works, but don't in IE8 (works in IE9, Chrome, FF3 e FF4). The relevant CSS is:
Top{ height: auto; }
Content{ min-height: 100%; }
Middle{ overflow: auto; padding-bottom: 130px; }
Footer{ clear: both; height: 130px; margin-top: -130px; position: relative; }
You might try CSS Media Queries with max or min-height. Examples here: http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html
and documentation here: http://www.w3.org/TR/css3-mediaqueries/
height:100%; should be all that is needed to make it take up the available space.
The Bad News: To be honest, mate, I don't think this is possible with this exact specification. It would take some very clever css at any rate. However, tables would work nicely. I'm completely against the idea, but if this design requirement is a must, then perhaps you should go the route.
The Good News: Depending on why it is you need them to be fluid, we could maybe give the desired effect. If it's just for backgrounds to match up, we could probably do that. Update your post with more information and I'll (hopefully) update mine with an answer.
I am coding exclusive ie6 css, wherein I am facing the problem. The footer does not take the min-width value whereas it accepts the fixed width value. I am using the repeat-x for an image and assigning a min-width value to it. The same thing I did with header div and it works perfectly fine. For example here is my code.
Header HTML which I have used for the same purpose.
<div id="header">
<!-- top-menu -->
<div id="top-menu">
<div id="left-logo">
<img src="img/logo-left.png" alt="BhatkalNews" />
</div>
<div id="navigation">
<ul>
<li class="contact"><img src="img/contact.png" alt="contact" /></li>
<li class="photo"><img src="img/photo.png" alt="photo"/></li>
<li class="video"><img src="img/video.png" alt="video" /></li>
</ul>
</div>
<div id="right-logo">
<img src="img/logo-right.png" alt="BhatkalNews" />
</div>
</div>
</div>
And here is the css I have used.
#header {
min-width: 1040px;
height: 111px;
background: url('../img/header-bg.jpg') repeat-x;
}
and for the same purpose the footer code is.
<div id="footer">
</div>
and the css
#footer {
min-width:1040px;
background:#36240A url('../img/footer.jpg') repeat-x;
height:291px;
}
Why isn't footer assigning the min-width?
Min-width doesn't work with IE6 - no surprises there as IE6 is terrible.
There are some workarounds, here is one:
{width:90%; min-width:1040px}
Basically, use width with a percentage - you'll have to experiment on the percentage depending on what you are trying to achieve.
IE6(not even 7) does not support min-width.
try expresssions like
width: expression( document.body.clientWidth < 1040 ? "1040px" : "auto" );
Unfortunately min-width simply doesn't work in IE6. There's some javascript based hacks that you can try though if you absolutely need to use min-width.
min-width and max-width are not supported by ie6.
Here is a workaround that I found with a quick google.
Though I haven't tested it, it seems to be sound.
This only works in IE:
#footer{
width:expression
(document.body.clientWidth < 1040? "1040px": "auto")
}
Try _width: 1040px; along with min-width: 1040px;
well to be frank none of the solution worked satisfactorily for me. and after doing a workaround i came up with this solution.
<div id="footer">
<div id="footer-content">
</div>
</div>
i defined the footer. and wrapped footer-content inside it and assigned width of 990px as i wanted the content to be wrapped within 940px i gave a padding of 50px; to the left. here is the css i used.
/*footer*/
#footer {
height: 291px;
background: url('../img/footer.jpg') repeat-x;
}
#footer-content {
margin:0 auto!important;
width: 990px;
height:291px;
padding-left:50px;
}
this works perfectly fine for me and the div's positions perfectly fine even if i am resizing. thank you for all the help guys. :)
Since you're coding exclusively for IE6, it be much more simple just to use:
width: 1040px;
IE6 doesn't recognize min-width, but treats width incorrectly, as if it was min-width.
(If it's not exclusively for IE6, you can use a hack, like the _width they already suggested you... or, even better, use conditional comments).
I've explained how to use min-width or min-height in IE6 over here: Min width in window resizing