I'm trying to use this technique
CSS 100% height layout
to fill page height 100%
Ultimately it fails because DOM has custom tags that won't honor height tag
Example:
Works
<div style="height:100%">
ok here
<div style="height:100%">
<!-- WORKS: takes full browser height -->
</div>
</div>
Broken
<div style="height:100%">
ok here
<my-tag style="height:100%">
<!-- BROKEN : takes minimal browser height -->
</my-tag>
</div>
I tried using
<polymer-element name="my-tag" extends="div">
but then page silently doesn't render anything.
By default, custom elements are display: inline. This means height:100% won't work unless you make the element block level:
:host {
display: block;
height: 100%;
}
The other issue is your declaration. When you use extends to extend another element, this is called a type extension custom element. Instead of declaring <my-tag>, it needs to be declared using is="":
<div is="my-tag"></div>
Demo: http://jsbin.com/bohumisa/1/edit
Related
I have a problem with cross-browser HTML makeup. In Firefox and Internet Explorer the width of a div container made with bootstrap is a fractional number (900.5 for example), and the child element fully inherits this width. In Chrome the container still has a fractional width (900.5), but the width of the child element is an integer (900), and I'd like to keep it that way. The question is, how am I supposed to do this without hardcoding the width?
<div class="container-fluid" style="margin: 10px 0 10px 10px;">
<div class="row">
<div class="col-lg-3 nopadding"></div>
<div class="col-lg-9 nopadding" style="left: -1px;">
<div id="content"> //this divs width is 900.5 everywhere
<div id="content-table"></div> //this divs width is 900 in Chrome and 900.5 in FF and IE
</div>
</div>
</div>
</div>
EDIT:
Unfortunately, I couldn't manage to upload the whole problem in jsFiddle because media queries do not work correctly there, so I put the code with almost the same situation here. In the example you can also see that element with id="content" has fractional width everywhere, but his child with id="content-table" has integer width in Chrome and fractional in FF and IE.
A solution could be to change the display property of the #content-table element. You used display:table, that let the element behave like a <table> element. In your case it is not needed because you don't use any table-cell, table-row, etc. child element (like display:table-cell or display:table-row).
You can simply use display:block. In this case the child element will be fractional in Chrome too. In your example will appear a scroll-bar, but you can use overflow:auto or overflow:hidden to hide it.
I created a JSFiddle example for the solution, using width: 200.5px for the #content element, but it is working in your code too. The link for the solution: https://jsfiddle.net/jeqmefxy/
I've been trying all sorts of solutions offered here and other places, and none of them seem to work. I'd like to have an image take up the full width of the browser window, no matter the size (height scaled proportionally). But I need to place this image within a smaller container <div>, as it's part of dynamic content (the body of a blog post). I'm using bootstrap, but I don't think this problem is unique to the framework. Code:
<div class="container">
<div id="content" class="col-md-8">
{dynamic content in here}
<!-- still part of blog post -->
<div class="large"><img src...></div>
{more content}
</div>
</div>
CSS:
div.content { width: 70%; }
div.large img { width: 100%; }
If I put <img src="..." class="large"> inside the container div, it will, of course, be the size of that <div>. If I manually set the width of the image to, say, 1900px, it extends far out to the right of the main content, and I have to experiment to find an appropriate negative margin-left to center the image (margin: 0 auto doesn't center it). And of course that only works on a pixel-specific size. As soon as the window size changes, that code breaks.
If I set position: absolute;, the image appears on top of any following content, which isn't the behavior I want. I also tried this javascript using jQuery:
<script>
$("div.large img").css("width", $(window).width);
</script>
As well as a version without jQuery that iterates over the results of document.getElementsByClassName().
None of these approaches seem to give the results I want. Opening and closing the container would be a Bad Idea(tm), as this would break the isolation between the static layout and dynamic content, and so break the whole site if the static part of the layout changes and the blog posts aren't all manually updated.
It works for me with position absolute
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
margin: 0;
}
div#small{
width: 200px;
background-color: green;
}
div#fullscreen{
position: absolute;
width: 100%;
background-color: red;
}
</style>
</head>
<body>
<div id="small">
i am a small div inside your browser window
<div id="fullscreen">
i got the same width as your browser window
</div>
</div>
<div id="small">
i am a small div inside your browser window
</div>
</body>
</html>
I think you'll need to do something like this...
<div class="container">
<div id="content">
<div class="col-md-8 etc..."></div>
{ content in here}
</div>
<!-- still part of blog post -->
<div class="large"><img src...></div>
<div class="col-md-8 etc..."></div>
{more content in here}
</div>
</div>
</div>
Set the .container to 100%, the content to 70% and the .large to 100% too
I don't even know if what I am asking is possible, but it's worth a shot. Basically I have a one page scrolling website controlled by jQuery, but it's a very very simple code, no plugin or external doc. That works great.
Every "page" if you will is divided into different divs to separately control function of pictures, tables, fonts, etc. per each page. Like this:
//home page
<div id="home">
content here
</div>
//about page
<div id="about">
content here
</div>
and so on and so forth... my question is, can i do something like this? I've tried but maybe I don't have the "decimal" in the right spot...
//home page
<div id="home resize">
<div id="home">
content here
</div>
</div>
//about page
<div id="about resize">
<div id="about">
content here
</div>
</div>
and then CSS be
home resize {
position: relative;
height: 100%;
width: 100%;
}
Two things I see right away. First, your CSS rule should be .home.resize instead of home resize. Second, height, when using percentages, requires that the height be set on the html tag to make a difference. So you will need rules such as this:
html {
min-height: 100%;
}
.home.resize {
height: 100%;
}
Otherwise, height will never take up the entire browser window height.
This all being said, I would guess that your best solution would involve JS or jQuery in some way. I know there are several single page scrolling plugins that do this job quite well.
First things first. HTML id's cannot contain spaces. You should define a class name resize. That being said. You can achieve this by using this.
Here is a fiddle
div id="home" class="resize">
content here
</div>
<div id="about" class="resize">
content here
</div>
.resize{
display:block;
height:100vh;
margin:0;
}
#home{
background-color:red;
}
#about{
background-color:blue;
}
vh is viewport height. It will set the height of your div same as viewport. 1vh is equivalent to 1/100th of viewport height
I'm trying to create a scrollbar-less page using CSS3 box-flex. Here's what I have:
<html>
<body style="height:100%;display:-webkit-box;-webkit-box-orient:vertical;"> <!-- height is 1000px -->
<div style="height:100px;">test</div>
<div style="-webkit-box-flex:1.0;">
<div style="height:100%;">test</div> <!-- expected this to be 900px, but it's 1000px -->
</div>
</body>
</html>
How can I make the child div fill up the rest of the page without using Javascript? (in this case, it's 900px).
P.S. I have Javascript resizing for browsers without CSS3 support.
Edit:
P.P.S: The child div is actually an iframe in my code, and box-flex doesn't seem to work on iframes.
The height of the child div is determined by it's content: http://jsfiddle.net/yNQDK/
In this case One line of text
I wanted to give all of the child's div elements a background-color of parent div. But, as I see, child divs' style overwrite parent's style even though child's did not have that property. For example,
<!-- Parent's div -->
<div style="background-color:#ADADAD;">
some codes here...
<!-- child's div -->
<div style="position:absolute;font-size:12px; left:600px;top:100px;">
again some codes...
</div>
</div>
In here, If i delete the style of child div, it works fine. I think my problem may be solved if i did the same thing with external css file also. But, I have already done hundreds of divs exactly like this. So, is there anyway to force parent's style to child style, just for background-color?(new in css)
But, as i see, chid divs' style overwrite parent's style even though child's did not have that property.
No, they just don't inherit the value by default, so they get whatever value they would otherwise have (which is usually transparent).
You can (in theory) get what you want with background-color: inherit. That has problems in older versions of IE though.
Use css selectors like this to make the background of child div's inherit from their parent:
Parent's div
<div id="thisparticulardiv">
some codes here...
child's div
<div class="childrendiv">
again some codes...
</div></div>
CSS:
#thisparticulardiv {
background-color:#ADADAD;
...
}
#thisparticulardiv div {
background: inherit;
position:absolute;
font-size:12px;
left:600px;
top:100px;
}
Use the inherit property on the child div :
background:inherit
<div style="position:absolute;font-size:12px; left:600px;top:100px; background:inherit">