I'm trying to get https://vscode.dev/ to pop up and take up the entire page when I click on the icon, but instead it seems to be only taking up the top part of the page. how can i fix this?
var div = document.getElementById("content");
while(div.firstChild) {
div.removeChild(div.firstChild);
}
document.getElementById("vscode").height = "100%";
document.getElementById("vscode").width = "100%";
}```
Elements are not 100% height by default and child elements are dependent on the parent height.
So you need to set the height of the parents including html and body elements to 100% height if you want a child to be 100% height.
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#vscode {
width: 100%;
height: 100%;
border:0
}
<iframe src="https://vscode.dev/" id="vscode"/>
Additionally, you could use 100vh
Related
I have a div container that is about 70% of the height of the page. The 30% which is outside the div is dim lighted (greyed out).
I am trying to implement a functionality where scrolling down within this container div causes the container div to fill up more of the page (less vertical space is greyed out) and eventually all of it (so 100% height).
Vica versa, when scrolling upward within the container and reaching the top should cause of the greyed out space to become bigger. What is the easiest way to implement this, possibly with the help of a library?
Using the scroll event and a combination of scrollTop, scrollHeight and clientHeight properties, we could get something that resembles your need:
let elem = document.querySelector('div');
elem.addEventListener('scroll', () => {
if(elem.scrollTop == 0) {
elem.style.height = `${elem.clientHeight + 10}px`;
}
if(elem.scrollHeight - elem.clientHeight == elem.scrollTop) {
elem.style.height = `${elem.clientHeight + 1}px`;
}
});
body {
background: #555;
height: 100vh;
margin: 0;
display: flex;
align-items: center;
overflow-y: hidden;
}
div {
background: #ccc;
height: 70%;
width: 100%;
overflow-y: scroll;
}
<body>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
My sticky navbar goes from body width (max 1450px) to 100% screen width when scrolling. https://biogenity.com/RC19/index.html
I've defined the body width using CSS:
body {
max-width: 1450px;
}
For the sticky navbar I currently use 100% width, but it doesn't apply within the width of body. I'm not quite sure what to use instead.
.sticky.is-sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1000;
width: 100%;
}
Could this maybe be fixed through the .js?
$(document).ready(function () {
// Custom function which toggles between sticky class (is-sticky)
var stickyToggle = function (sticky, stickyWrapper, scrollElement) {
var stickyHeight = sticky.outerHeight();
var stickyTop = stickyWrapper.offset().top;
if (scrollElement.scrollTop() >= stickyTop) {
stickyWrapper.height(stickyHeight);
sticky.addClass("is-sticky");
}
else {
sticky.removeClass("is-sticky");
stickyWrapper.height('auto');
}
};
// Find all data-toggle="sticky-onscroll" elements
$('[data-toggle="sticky-onscroll"]').each(function () {
var sticky = $(this);
var stickyWrapper = $('<div>').addClass('sticky-wrapper'); // insert hidden element to maintain actual top offset on page
sticky.before(stickyWrapper);
sticky.addClass('sticky');
// Scroll & resize events
$(window).on('scroll.sticky-onscroll resize.sticky-onscroll', function () {
stickyToggle(sticky, stickyWrapper, $(this));
});
// On page load
stickyToggle(sticky, stickyWrapper, $(window));
});
});
Thanks in advance.
By using position:fixed you remove the element from the normal document flow so I don't believe the body styles apply.
From position - CSS: Cascading Style Sheets | MDN
The element is removed from the normal document flow, and no space is
created for the element in the page layout.
So you should set the max-width for it and allow it to be centered by setting left and right to auto:
.sticky.is-sticky {
position: fixed;
max-width: 1450px;
left: auto;
right: auto;
top: 0;
z-index: 1000;
width: 100%;
}
I have two images side-by-side within a block-level container with arbitrarily different dimensions (as in, they could be any two images) that I want to dynamically adjust the width of so that the overall height of the two images is the same. I don't think this can be done in CSS from everything I've seen (although possibly with the flexbox model, but I don't know enough about it to say) so I may need a JavaScript solution, but the ones I came up with failed due to either not knowing the overall height of the bounding box, or the fact that adjusting the height of the images affected the height of the bounding box which meant it was constantly re-adjusting itself.
This is an example of arbitrary image heights: https://jsfiddle.net/c6h466xf/
And this is what I'm trying to achieve (although obviously without hard-coding the widths, I want those to be resolved dynamically): https://jsfiddle.net/c6h466xf/4/
This is what I'm starting with (links to JSFiddle need code):
CSS
div.container {
width: 100%;
}
div.container img {
width: 49%;
}
HTML
<div class="container">
<img src="http://i.imgur.com/g0XwGQp.jpg">
<img src="http://i.imgur.com/sFNj4bs.jpg">
</div>
EDIT: I don't want to set a static height on the container element, because that stops it from responding to the width of the overall page, so that the images resize dynamically to each other and responsively to the width of the page, so their total combined width is always (for example) 80% of the page width whatever the viewing device.
If it's responsive, use percentage heights and widths:
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
div.container {
width: 100%;
height: 100%;
white-space: nowrap;
}
div.container img {
max-height: 100%;
}
<div class="container">
<img src="http://i.imgur.com/g0XwGQp.jpg" />
<img src="http://i.imgur.com/sFNj4bs.jpg" />
</div>
You could set it by height. Give your container div a fixed height.
Here is a solution for you:
div.container {
height:200px;
}
div.container img {
height: 100%;
}
JSFIDDLE
You have 2 other options to get all your images to the same height:
You can place an overflow:hidden on the container div
Or
Clip your images to the same size: http://www.w3schools.com/cssref/pr_pos_clip.asp
Set a class for your images:
<img src="http://i.imgur.com/g0XwGQp.jpg" class="example" >
<img src="http://i.imgur.com/sFNj4bs.jpg" class="example" >
Then you need to set the height of your container:
div.container {
height:200px;
}
In your JavaScript:
var yourImg = document.getElementsByClassName("example");
if(yourImg && yourImg.style) {
yourImg.style.height = '100%';
yourImg.style.float = 'left';
}
This should be a simple code, check the following:
HTML code:
<table class="Table">
<tr>
<td><img src="images/1.jpg"/></td>
<td><img src="images/2.jpg"/></td>
<td><img src="images/3.jpg"/></td>
<td><img src="images/4.jpg"/></td>
</tr>
</table>
CSS:
table { width: 100%; }
table img {
max-width: 100%; max-height: 100%; padding-left: 5px; border: none;
}
I have a situation where I need to make a div the same size as an absolutely positioned sidebar. I sorted that using this bit of jQuery;
$('#main').height('auto');
top_height = $('.toolbar').outerHeight();
side_height = $('#RightSideBar').height();
body_height = $('#main').innerHeight();
console.log(body_height + ' ' + side_height);
if (body_height < side_height){
$('#main').height(side_height + top_height);
}
else {
$('#main').height(body_height);
}
I have ran into a new problem due to the dynamic nature of some content on some pages. Since the height of #main is absolutely set if the size of its content increases the size of the div will not increase with it and vice versa.
I need the div to be set the same height as the sidebar and remain fluid with its content. So the div would increase and decrease in height up to the height of the sidebar.
I hope that is easily understandable, if its not please say so.
instead of setting the height of #main with your calculations, try setting the min-height:
if (body_height < side_height){
$('#main').css('min-height', side_height + top_height);
}
else {
$('#main').css('min-height', body_height);
}
You can do this without javascript. You need a relative positioned parent that will auto size to side bar and then an absolute positioned div that adopts 100% height of parent. Never is there a set height, always fluid.
DEMO http://jsfiddle.net/nSBaA/1/
#wrapper {
position: relative;
}
#main {
position: absolute;
height: 100%;
width: 70%;
}
#sidebar {
float: right;
width: 20%;
}
I have a table with three rows. I have 1 main #container div (height 100%) and inside it is a table with 3 rows. The first and last row have fixed size content. In the second row is a #content div with 100% height and overflow:auto. (actually the table has a lot more rows and the page has more divs, but for the sake of clarity i scalled it down for this question).
If there is more content in #content than fits, a vertical scrollbar should appear next to that div's content. However, a vertical scrollbar appears at the browser window itself. When i set the #content div to a fixed size however, that vertical scrollbar does appear in the correct place.
I must be doing something wrong, or maybe misinterpreting something :) Any ideas? Maybe there's jquery/javascript out there that can monitor the page and when loading/resizing the browser, scales down that particular div?
EDIT: I just created a small example: http://wierdaonline.com/softest.html
In the ideal situation, the whole thing (table) should always be visible in the browser window, without any window scrollbar other than in the #content div.
It's much easier to create a fixed header and footer without using tables and using fixed position:
#header
{
position: fixed;
top: 0;
height: 20px;
}
#middle
{
position: fixed;
top: 20px;
bottom: 20px;
overflow: auto;
}
#footer
{
position: fixed;
bottom: 0;
height: 20px;
}
Set overflow: scroll in the div. You shouldn't need Javascript for this.
The #container 100% is 100% of the page height which can be more than the window height. Setting html and body height to 100% (=100% of the window) could help, depending on what you are trying to achieve.
Edit: these changes should work for the height, a similar thing can be done with the width if you so desire.
javascript:
window.onresize = function() {
var tehdiv = document.getElementById('content2');
if($(window).height() < 100) { tehdiv.height = 50; }
else if($(window).height() > 2000) { tehdiv.height = '100%'; }
else { tehdiv.height = ($(window).height()/2);}
};
the content div's table:
<td valign='top' id='content2'>
Would something like this work?
window.onresize = function() {
var minh = 50;
var minw = 50;
var tehh = (window.height/2);
var tehw = (window.width/2);
var tehdiv = document.getElementById('yourdiv');
tehdiv.height = (tehh > minh)? tehh : minh;
tehdiv.width = (tehw > minw)? tehw : minw;
};
That would make it scale to half the window size, as long as it can be bigger whan 50. You could also change the min to max and make it perform tehdiv.height = 100% at that point.
Well since you have no choice but to use tables, I modified the HTML, but actually left the CSS the same from the demo I posted in a comment above, check it out here - the only problem I've found is in IE7 where the header and footer table cell doesn't go 100% across:
CSS
#header, #footer {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 20px;
border: #000 1px solid;
margin: 5px;
}
#footer {
top: auto;
bottom: 0;
}
#content {
position: absolute;
top: 25px;
left: 0;
bottom: 25px;
right: 0;
overflow-y: auto;
background: #ddd;
margin: 5px;
}
HTML
<table id="page">
<thead>
<tr><td id="header">Header</td></tr>
</thead>
<tfoot>
<tr><td id="footer">Footer</td></tr>
</tfoot>
<tbody>
<tr><td><div id="content">Content goes here</div></td></tr>
</tbody>
</table>
It's still better to not use tables, if you get around to switching the HTML around.