I am trying to create a two-column, full-screen magazine viewer, with a fixed width banner on the left. The right column will be responsive.
Utilising the display:table; method I have created the following:
http://jsfiddle.net/pouncebounce/pTeBP/2/
HTML
<div class="tbl_con">
<div class="tbl_row">
<div class="tbl_cell" id="banner">
</div>
<div class="tbl_cell" id="publication">
</div>
</div>
</div>
<script>
var viewer = new com.zmags.api.Viewer();
viewer.setPublicationID("b129d2b8");
viewer.setParentElementID("publication");
viewer.show();
</script>
CSS
* {
margin: 0;
padding: 0;
border: none;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
.tbl_con {
display: table;
width: 100%;
min-height: 100%;
*height: 100%;
}
.tbl_row {
display: table-row;
width: 100%;
min-height: 100%;
*height: 100%;
}
.tbl_cell {
display: table-cell;
min-height: 100%;
*height: 100%;
}
#banner {
width: 200px;
background-color: #1E90FF;
border-right: solid 3px #fff;
}
#publication {
width: *;
background-color: #FFAB1E;
}
This displays correctly in the latest version of IE and Chrome, but not in Firefox, where the 100% heights, or the actual magazine, do not appear at all. Any reason why?
Change *height to height and remove min-height.
Make sure you test in IE7, but it should work.
Related
I'm trying to make a child div of a Flexbox container with overflowing-x content have 100% of the width WITH the overflow, but I can't figure out it, have made several searches and couldn't find a solution;
Can someone help me?
Fiddle: https://codepen.io/joaovtrc/pen/MWaaxKr
HTML:
<div class="test-container">
<div class="test-item-overflow">
overflowing contenttttttt
</div>
<div class="test-item-2"></div>
</div>
CSS:
.test-container {
width: 1000px;
height: 500px;
margin: auto;
background: black;
display: flex;
flex-direction: column;
overflow-x: auto;
}
.test-item-overflow {
width: fit-content;
height: 55px;
background: red;
border: 1px solid yellow;
}
.test-item-2 {
width: 100%;
height: 55px;
background: blue;
border: 1px solid green;
}
I want the 'test-item-2' (the one with the blue background) div to match the red one in width, but, keep in mind that the content on the redbox might not be exactly the same everytime, so no calc(100% + x) with fixed params...
As you have set the width: fit-content; for the overflow div, it makes the width uncontrollable as it grows with more content in that div. one solution might be to change the width: 100%; and add overflow-x: scroll to the class .test-item-overflow. (see the change in the below snippet)
However, if you want to keep the width: fit-content; for the red div and change the blue div's width along with the red one (depending on the content) you can add: document.getElementsByClassName("test-item-2").style.width = document.getElementsByClassName("test-item-overflow").offsetWidth + "px". (in this case it's better to define id for the divs and use getElementById in the js code)
.test-container {
width: 1000px;
height: 500px;
margin: auto;
background: black;
display: flex;
flex-direction: column;
overflow-x: auto;
}
.test-item-overflow {
width: 100%;
overflow-x: scroll;
height: 55px;
background: red;
border: 1px solid yellow;
}
.test-item-2 {
width: 100%;
height: 55px;
background: blue;
border: 1px solid green;
}
<div class="test-container">
<div class="test-item-overflow">
aaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="test-item-2"></div>
</div>
So I really recommend you go ahead and add the following lines
Margin:0px;
This will take away all the space between your content and browser
Padding:0px;
This will take away all the space between your content and content border
Overflow:hidden;
Finally this should remove overflown content.
Hope that helped!
Better to use display:grid; on .test-container. After if you dont want to have gap between to the 2 cells, this is due to .test-container { height: 500px; }.
DEMO:
html body {
width: 100vw;
height: 100vh;
margin: 0px;
overflow: auto;
display: flex;
align-items: center;
background: grey;
}
.test-container {
width: 1000px;
height: 500px;
margin: auto;
background: black;
/*display: flex;
flex-direction: column;*/
display:grid;
overflow-x: auto;
}
.test-item-overflow {
width: 1500px;
height: 55px;
background: red;
border: 1px solid yellow;
}
.test-item-2 {
width: 100%;
height: 55px;
background: blue;
border: 1px solid green;
}
<div class="test-container">
<div class="test-item-overflow">
overflowing contenttttttt
</div>
<div class="test-item-2"></div>
</div>
I am trying with Javascript window.print to print a content inside the div container. The div container is managed by angular js.
CSS file
#media print
{
body, html, #wrapper {
width: 100%;
margin:0px;
padding:0px;
border: 1px solid red;
}
.no-print, .no-print * {
display: none !important;
}
.col-sm-12 {
width: 100%;
}
}
HTML containing the DIV
<div ng-show="views.invoice">
<div class="row col-sm-12" style="margin:0px; padding:0px; width:100%">
test
</div>
<div class="row no-print">
<div class="col-12">
<button class="btn btn-success btn-default" onclick="window.print();"><i class="fa fa-print"></i> {{phrase.Print}}</button>
</div>
</div>
</div>
This is how it is shown in the browser
When I do the print it is printing to PDF as below
I see a big margin around the text 'test'. How can I print without any margin or padding?
The Problem
It's most likely because you've set the visibility your drawer and your navbar (the left-side navigation and the top-side navigation) to hidden. When something's visibility is set to hidden, it is still in the layout and preserves its height, width, margin, and padding. This is why you're seeing the space of your drawer and navbar, respectively causing the space on the left side and the top side.
You can run and try printing the below screen. You'll see the problem I mentioned (the space caused by the preserved sizes [height, width, padding, margin]).
#media print {
body,
html,
#wrapper {
width: 100%;
margin: 0px;
padding: 0px;
border: 1px solid red;
}
#drawer {
visibility: hidden;
}
#navbar {
visibility: hidden;
}
.no-print {
display: none;
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
position: relative;
width: 100%;
height: 100%;
}
#wrapper {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
}
#navbar {
width: 100%;
background: blue;
color: white;
padding: 20px;
}
#section--right {
flex-grow: 1;
}
#drawer {
height: 100%;
width: 100px;
background: red;
color: white;
padding: 20px;
}
#navbar .text {
display: inline-block;
height: 50px;
background: #121212;
}
<div id="wrapper">
<div id="drawer">Some drawer</div>
<div id="section--right">
<div id="navbar"><span class="text">Some navbar</span></div>
<div id="print__section">
test
</div>
<button id="print__button" class="no-print" onclick="window.print()">Print now</button>
</div>
</div>
Solution
My suggestion is to set a special id or class to the printable region. Then, set all the other elements' visibility inside body that have no such special id or class to hidden. Furthermore, because setting visibility to hidden still allows the elements to preserve their dimensions, set their sizes (height, width, margin, and padding) to 0 too. Note that you can't use display: none because your printable region will also not be displayed.
Here's a working example that will solve your problem.
#media print {
body,
html,
#wrapper {
width: 100%;
margin: 0px;
padding: 0px;
border: 1px solid red;
}
/* Makes all divs that are not inside the print region invisible */
/* Then, set the size to 0 by setting everything (height, width, margin, and padding) to 0 */
body *:not(#print__section) {
visibility: hidden;
height: 0;
width: 0;
margin: 0;
padding: 0;
}
/* Parents' visibility cascade to children's visibility */
/* Make the print region visible again to override parent's visibility */
#print__section {
visibility: visible;
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
position: relative;
width: 100%;
height: 100%;
}
#wrapper {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
}
#navbar {
width: 100%;
background: blue;
color: white;
padding: 20px;
}
#section--right {
flex-grow: 1;
}
#drawer {
height: 100%;
width: 100px;
background: red;
color: white;
padding: 20px;
}
#navbar .text {
display: inline-block;
height: 50px;
background: #121212;
}
<div id="wrapper">
<div id="drawer">Some drawer</div>
<div id="section--right">
<div id="navbar"><span class="text">Some navbar</span></div>
<div id="print__section">
test
</div>
<button id="print__button" class="no-print" onclick="window.print()">Print now</button>
</div>
</div>
I need to set up a video width/height accordingly to its container.
Basically the video should have height 100% of its green container and the width should be variable.
plyr.setup();
body {
margin: 0;
}
.plyr {
height: 100%;
width :100%;
}
#wrapper{
display: flex;
justify-content:center;
width: 900px;
height: 500px;
background-color: green;
}
<script src="https://cdn.plyr.io/2.0.11/plyr.js"></script>
<div id="wrapper">
<div>
<div data-type="youtube" data-video-id="5p-Jdjo7sSQ"></div>
</div>
</div>
You can try this solution :
add other class for player's generated html.
plyr.setup();
body {
margin: 0;
}
.plyr {
height: 100%;
width :100%;
}
#wrapper{
display: flex;
justify-content:center;
width: 900px;
height: 500px;
background-color: green;
}
.plyr__video-wrapper {
height: 100%;
}
.plyr__video-wrapper iframe {
width: 100%;
height: 100%;
}
<script src="https://cdn.plyr.io/2.0.11/plyr.js"></script>
<div id="wrapper">
<div data-type="youtube" data-video-id="5p-Jdjo7sSQ"></div>
</div>
Then your height/width percents will actually perfectly work.
Under #wrapper, if you remove
display: flex;
Then your height/width percents will actually work. Then you can change the width to however you'd like in your JS.
Try this. Fiddle
body {
margin: 0;
}
.plyr {
height: 100%;
width :100%;
}
#wrapper{
display: flex;
justify-content:center;
width: 100%;
background-color: green;
}
.plyr__video-wrapper {
position: relative;
padding-bottom: 56.25%;
}
.plyr__video-wrapper iframe {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
What is a cool CSS3 method to ensure an image will occupy window-height with min-width:50% and max-width:100%; depending on the size of the image?
So if the image is good quality and greater than the resolution of the screen/viewport, it will behave as a background-size:cover; and if not, it will occupy atleast 50% of the screen real estate.
Thanks.
PS - If CSS3 can't do, JS method is cool but otherwise could be preferred as a fall-back
html,
body {
min-height: 100% !important;
background-color: #efefef;
color: #5c5c5c;
overflow-y: hidden;
}
html {
font-size: 10px;
}
body {
/*background: #fff;*/
margin: 0;
height: 100%;
}
#layout {
height: 100%;
max-height: 100%;
min-width: 100%;
position: absolute;
display: flex;
flex-flow: row nowrap;
justify-content: left;
align-items: center;
}
#cover {
background: #EFEFEF;
flex: 0 0 30rem;
max-height: 100%;
width: auto;
min-width: 100%;
max-width: 100%;
height:100%
}
.hold-img{width: inherit;height: inherit;padding: 0;margin: 0;}
<div id="layout">
<div id="cover">
<div class="hold-img" style="background-image:url('http://o.aolcdn.com/hss/storage/adam/251ba9d4b7db2c58ef46af60de813ebe/f9xcnp12WNl7B64E5MPAkpznF7v.jpg');background-repeat:no-repeat;
background-position: center center;background-size:cover;"></div>
</div>
<!--
Big Image - http://o.aolcdn.com/hss/storage/adam/251ba9d4b7db2c58ef46af60de813ebe/f9xcnp12WNl7B64E5MPAkpznF7v.jpg
Half-image - http://wac.450f.edgecastcdn.net/80450F/comicsalliance.com/files/2014/03/SpaceJam02.jpg
-->
</div>
You can make it like this
.the_img{
width: 100%;
max-width: 1024px;
}
For max-width you will add the width of the image so it doesn't go beneath that.
http://jsfiddle.net/abb2sghh/
I have 2 divs:
A header div at the top of the page with a set height of 150px.
A container div sitting under the header div.
What I would like is for the container div to be dynamic and resize to 100% of the remaining space underneath the header div.
I have tried putting in height: 100% but this makes the page need to scroll. I presume it is making the div 100% of the browser height rather than 100% of the remaining body's height.
How can I make it so that the container div simply resizes its height to the remaining body space?
Please find the relevant code below:
body,
html {
margin: 0;
height: 100%;
}
#header {
width: 100%;
height: 150px;
background-color: #999999;
}
#container {
width: 760px;
height: 100%;
background-color: #CCCCCC;
margin: 0 auto;
}
<div id="header"></div>
<div id="container"></div>
You can simply do that by using some math with the calc() CSS function. Subtract 150px (the header size) from 100%. This is dynamically calculated.
body,
html {
margin: 0;
height: 100%;
}
#header {
width: 100%;
height: 150px;
background-color: #999999;
}
#container {
width: 760px;
height: calc(100% - 150px);
background-color: #CCCCCC;
margin: 0 auto;
}
Compatibility: calc() is supported in most modern browsers and IE 9 +
Example fiddle and snippet below:
body,
html {
margin: 0;
height: 100%;
}
#header {
width: 100%;
height: 150px;
background-color: #999999;
}
#container {
width: 760px;
height: calc(100% - 150px);
background-color: #CCCCCC;
margin: 0 auto;
}
<div id="header"></div>
<div id="container"></div>
I think the correct modern way to acomplish this without css hacks is with FlexBox, which as of the writting of this post is supported by all modern browsers. (you can check browser compatibility here)
It also gives you more flexibility. If you later decide to add new rows (or even side columns) is very easy to acomplish without any calculations.
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
display: flex; /* Activates FlexBox Model */
flex-direction: column; /* Divs are spanned vertically */
width: 100%;
height: 100%;
}
#header {
background-color: #ccc;
height: 150px;
}
#content {
background-color: #888;
flex-grow: 1;
}
<div id="container">
<div id="header">My header with some stuff</div>
<div id="content">My content</div>
</div>
The outer container has to have position: relative and the div that you want to stretch to the bottom has to have position: absolute. This solution is pure css with no calls to calc().
body, html {
margin: 0;
height: 100%;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
#header {
height: 150px;
width: 100%;
background-color: #999999;
}
#mainContent {
width: 760px;
top: 150px;
bottom: 0;
right: 0;
left: 0;
background-color: #CCCCCC;
margin: 0 auto;
position: absolute;
}
JSFiddle: http://jsfiddle.net/wt0k73bz/