I have a body of text that is currently responsive.
<div class = "col-sm-6 col-xs-6>
<div class = "well">
<p> A lot of text... </p>
</div>
</div>
I want the text to be scrollable (within the well), but I would like the max height of the well to change based on the screen size.
The following makes the well scrollable but I am not sure how
to have the custom heights... one for sm and one for xs.
.scroll_for_sm {
height: 500px !important;
overflow: scroll;
}
.scroll_for_xs {
height: 250px !important;
overflow: scroll;
}
If you want the height of the well to respond according to the screen size (or height in this matter), just specify a height to your body so in your css, add this:
html, body {
height:100%;
min-height: 100% !important;
}
and then, for the well, add this css:
.well{
height:100%;
}
(The percentages can be changed to pixels, em, %, etc and valued accordingly depending on what you want)
Related
I am leaning Angular 4 and I am creating an app with Bootstrap , I am using the grid system, but I am not ale to set any height to the columns of the grid.
I have tried all solutions available on internet setting overflow to hidden at container and then setting clear : both on column. Not able to make it work
<div class="container" >
<div class="row">
<div class="col-lg-12" style="background-color:aqua">
Column 1
</div>
</div>
<div class="row">
<div class ="col-lg-12" style="background-color:blueviolet">
Column 2
</div>
</div>
</div>
.container{
height: 90%;
overflow:hidden;
}
.row{
height:25%;
clear: both;
}
.col-lg-12{
height:100%;
clear:both;
}
JsFiddle link link
Please let me know!!!
The problem is that you are trying to set height with percentage.
The height of a block element (div is a block element) depends on the height of the content.
If you specify a percentage, that will always respect the height of the content, no matter what.
Change the height to pixels and you will control the height of the element.
See this answer for more information
.container {
display: inline-block;
width: 100%;
height: 100%;
margin: auto;
overflow:hidden;
}
.row {
overflow:hidden;
width:100%;
height:25%;
}
.col-lg-12 {
float: left;
width: 10%;
height: 350px; -> height in pixels, not in percent
clear: both;
}
Does defining the height of a parent container work? (Using vh units to define its height, as illustrated below, should make it responsive.)
It's hard to tell from this snippet but in your full code, do you define the height of an element that contains the .container div? If not, the 90% that you've set as .container's height won't work, because there won't be a defined context for exactly what you're using to create your height: 90%.
If you add the height to your parent element -- and you can see this in play in this example on Codepen: https://codepen.io/msummers40/pen/EobqOo -- things take on more definition/greater heights. On that Codepen page, I just added a new parent element and a corresponding CSS selector:
.container-of-container {
height: 100vh;
width: 100%;
}
With the .container-of-container div's height set to 100vh, .container's height becomes 90% of that. In turn, your two rows are each 25% of .container's height.
In any case, if you set the height (using px, em, vh etc) of the parent element of .container, you should see the resizing take place more as you're expecting.
This may come off as basic, but I'm new to img tags. On this website morningsignout.com, I want to resize the images so that they're smaller. I learned about editing their img tag properties in firebug with "height="40%"", but it doesn't seem to work on any of the article's main images. How do I resize them in html?
I'm presuming that you want to resize the image according to the height of the view window. To do that, you can use the vh unit in css. 100 vh units is the height of the screen that the user is viewing the page on.
Here's an example that sets all the imgs to 40% of the viewport height
img {
height: 40vh;
}
Height with percents it's a little bit tricky because the parent must have height too. You have 2 options: Set the parent's height too. B. Set the height by pixels.
.first {
height: 450px;
}
.first img {
height:50%;
}
.second img {
height:200px;
}
<div class="first">
<img src="http://i.stack.imgur.com/33oYG.jpg" />
</div>
<div class="second">
<img src="http://i.stack.imgur.com/33oYG.jpg" />
</div>
I'm stressing out because of a mindbreaker and I'm probably missing some essential, but easy thing.. And although I've done this many times before.. it's going wrong now.
So I'm creating a web app and always my starting point is
html, body {
height:100%;
width:100%;
}
And some of my inner elements have a set height in percentages and some in pixels.
However, to have some structure in my code, I'm setting up div's without a set height. Let's set up the following situation.
HTML
<div class="wrapper">
<div class="thisIsAStructureItem">
<div class="innerElement">
And just some untagged piece of text
</div>
</div>
</div>
CSS
.wrapper {
height:100%;
width:100%;
}
.thisIsAStructureItem {
/* nothing, not even height */
}
.innerElement {
height: 17.5%;
}
But in any editor or browser, because I haven't set a specific (%/px) height on the second element, it shows up as 0px, including all the inner elements.
So stupid as this might be.. What am I doing wrong?
UPDATE: See this JSFiddle
The situation makes it appear a set height is necessary, therefor so my title. Feel free to adjust to something more suitable
The situation above is a replica of a to-build-situation and using exact pixels is (at that above part) not an option. Please don't advice 'use X pixels'.
Original: http://jsfiddle.net/o0Lfyt0m
Updated: http://jsfiddle.net/o0Lfyt0m/1/ (from code sample below)
The innerElement is trying to display as 17.5% as tall as the parent element. The problem is that the parent element does not have a defined height. As a fall back to calculating 17.5% of undefined, the div's height is essentially defaulting to "auto" and assuming the height of it's content, which is based on the size of the font, line-height, padding etc.
Edit: A nice feature of CSS is that an elements styles can be inherited from it's parents. You can add a structure class which will inhert the height from it's parent element, which seems to be your intent.
You could even add this class to the body element, since it's height and width are identical to html... just not certain if the HTML element can be styled in all browsers, so I didn't do that.
html, body {
height: 100%;
width: 100%;
}
.wrapper {
height: 100%;
width: 100%;
}
.struct {
height: inherit;
width: inherit;
}
.innerElement {
height: 17.5%;
}
<div class="wrapper">
<div class="struct"> <!-- .struct inherits height/width from .wrapper -->
<div class="innerElement"> <!-- height calculated based on .wrapper -->
And just some untagged piece of text
</div>
</div>
</div>
Yes, you need to set the height 100% for that div too. Otherwise it's height is unknown and will not be able to take exactly the 100% height and innerElement height is not calculated accordingly.
To make sure, you must use the height 100% for that div too.
.wrapper {
height:100%;
width:100%;
}
.thisIsAStructureItem {
height: 100%;
}
.innerElement {
height: 17.5%;/* calc from it's parent div height i.e. thisIsAStructureItem*/
}
You are, in effect, asking the browser to calculate a height from an undefined value. Since that would equal a null-value, the result is that the browser does nothing.
I have a supercontainer (fitting screen width, with margins and padding) , which contains a wider container, which in turn contains (sorry for the redundancy) an undetermined (DB-driven) number of left-floated boxes. It is all part of a Backbone/Underscore template.
I want the boxes to have the same width as the supercontainer, in order to make only one visible at a time (there's a horizontal scroller-function in the Backbone View). I know I could use jQuery to get the supercontainer's width and apply it to boxes upon rendering, but I would definitely prefer a pure-CSS solution to avoid issues with screen resizing.
To make things clear:
HTML:
<div id="supercontainer">
<div id="wide-container">
<div class="fun-box"></div>
<div class="fun-box"></div>
<div class="fun-box"></div>
</div>
</div>
CSS:
#supercontainer {
width:100%;
overflow:hidden;
margin:50px;
}
#wide-container {
display:table;
}
.fun-box {
height:100%;
float:left;
width: ???; /* something that makes it as wide as the supercontainer */
}
How can I do that?
If the #supercontainer always has 100% width of window, you can match it by applying width: 100vw for the boxes
.fun-box {
height:100%;
float:left;
width: 100vw;
}
Viewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of the document.
1vw =1/100th of the width of the viewport
-MDN
You can try making .fun-box a third of #wide-container's width, and #wide-container three times #supercontainer:
#wide-container {
width: 300%;
}
.fun-box {
width: 33.33%;
}
Demo
I have a page with a repeated background image that I want to expand behind the entire page content.
So I want the HTML's height to be set to either 600px or 100% of screen—the highest between them
(600px being the minimum height I need for my content, and 100% in case that the screen height is bigger than 600px so I want to expand my HTML to fit it)
I tried
html
{
min-height:600px;
height:100%
}
which doesn't work.
The repeated background-image is in a nested div (#container) since my site's width is limited and centered
#container
{
width:1000px;
height: 100%;
margin:0 auto;
background-image: url("/images/bg_content.png");
}
<body>
<div id="container">
</div>
</body>
Apply to the body, not the HTML
body {
min-height:600px;
height:100%;
}
This fiddle will always have a minmum of 600px but will expand when required.