Jump to content
Karaethon

Strech to fit height...

Recommended Posts

I am wanting my page to fill the browser window even when the contents are less than big enough. I'm using bs4 and I know that this can be done somehow... Anyone know how?

Share this post


Link to post
Share on other sites

Even an empty page will "fill" the window, so you'll have to explain what you mean by that.

Share this post


Link to post
Share on other sites

My divs are not filling the screen, the green and yellow sections are supposed to stretch all the way down...

Screenshot_20190104-134808_Opera.jpg

Share this post


Link to post
Share on other sites

You can "stretch" the green by putting that background on the body instead of a div.

What's your markup?

Share this post


Link to post
Share on other sites
6 hours ago, requinix said:

You can "stretch" the green by putting that background on the body instead of a div.

What's your markup?

Yeah but later when I add contents I'm using BS to center them vertically and so I need the div to fill the screen to center on the screen...

MARKUP:

<?php
include_once '../includes/safecracker.inc';
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Safe Cracker</title>
  <meta name="description" content="A webgame where users attempt to find yhe code to a vault that is filling with money, and win the money inside when it opens.">
  <meta name="author" content="Karæthon; Split Infinitive Software, LLC">

  <?PHP
    echo $js_jquery;
    echo $js_bootstrap;
    echo $css_bootstrap;
    echo $css_fontawesome;
    echo $css_override;
  ?>

</head>
<body>
  <div class="container-fluid">
    <div class="row d-flex">
      <div class="col-12 bg-success">
        <ul class="nav nav-pills nav-justified">
          <!-- list item only here during testing, remove upon release-->
          <li class="nav-item">
            <a class="active fas fa-home" data-toggle="collapse" data-target="#needcookies"></a>
          </li>
          <!-- end testing item-->
          <li class="nav-item">
            <a class="fas fa-home" data-toggle="collapse" data-target="#home"></a>
          </li>
          <li class="nav-item">
            <a class="fas fa-home"data-toggle="collapse" data-target="#login"></a>
          </li>
          <li class="nav-item">
            <a class="fas fa-home" data-toggle="collapse" data-target="#selectvault"></a>
          </li>
          <li class="nav-item">
             <a class="fas fa-home"data-toggle="collapse" data-target="#game"></a>
          </li>
          <li class="nav-item">
             <a class="fas fa-home"data-toggle="collapse" data-target="#purchase"></a>
          </li>
        </ul>
      </div>
    </div>
    <div class="row d-flex">
      <div class="col-2 bg-success sidebar"> </div>
      <div class="col-8 bg-warning" id="central">
        <div class="collapse" id="needcookies" data-parent="#central">111111</div>
        <div class="collapse show" id="home" data-parent="#central">222222</div>
        <div class="collapse" id="login" data-parent="#central">333333</div>
        <div class="collapse" id="selectvault" data-parent="#central">444444</div>
        <div class="collapse" id="game" data-parent="#central">555555</div>
        <div class="collapse" id="purchase" data-parent="#central">666666</div>
      </div>
      <div class="col-2 bg-success sidebar"> </div>
      <div class="navbar bg-primary data-toggler fixed-bottom" data-toggle="collapse" data-target="#footercontents">
        <span class="nav-brand small"><img src="/img/sis_logo.png" style="width: 40px;">© 2018-<?php echo date("Y");?> Split Infinitive Software</span>
        <div class="footercontents">
          <ul class="navbar-nav">
            <li class="nav-item">temp</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <?php

  ?>
</body>
</html>

 

Share this post


Link to post
Share on other sites

Like I said, put the green background on the whole body.

For the yellow, I'm thinking position:absolute give a fixed height to the first row then position:absolute the second row with top/right/bottom/left values so it takes the full screen minus the amount at the top that the first row was using.

Share this post


Link to post
Share on other sites

Ok, I guess that would work, but how do I get the values needed, JavaScript code to get window height and width?

Share this post


Link to post
Share on other sites

Perhaps use vw or % units instead of px

Share this post


Link to post
Share on other sites
17 hours ago, requinix said:

Like I said, put the green background on the whole body.

I woke up this morning and realized that I missed something. I only have the divs colored to ID them during development, they're all going to lose their color when I'm done, I realized that I didn't explain that, my goal is to have my content centered in the browser and that's why I'm trying to stretch the divs to full height.

Share this post


Link to post
Share on other sites

Building on your other post, what are your target browsers? If you're not concerned with IE9 and are using an auto-prefixer (or don't mind typing a lot) you can use flexbox. A combination of flex-grow with justify-content and align-items can do exactly what you're looking for easily. If you're targeting more modern browsers (in other words, you don't mind skipping out on IE support entirely), you can use grid, though that could be more complicated depending on how your brain works.

If you are dealing with much older browsers, use 100vh with positioning and transforms as @Barand suggests.

Share this post


Link to post
Share on other sites

Well, I'm not personally worried a out browser support, I want to use the best practices I can and if the user is stuck in the past... well not my concern. I am doing development on an android device and testing using opera, firefox, chrome, duck duck go, and samsung internet as my test browsers. Mostly because that's what I have. 

Share this post


Link to post
Share on other sites
5 hours ago, maxxd said:

Building on your other post, what are your target browsers? If you're not concerned with IE9 and are using an auto-prefixer (or don't mind typing a lot) you can use flexbox. A combination of flex-grow with justify-content and align-items can do exactly what you're looking for easily. If you're targeting more modern browsers (in other words, you don't mind skipping out on IE support entirely), you can use grid, though that could be more complicated depending on how your brain works.

I am trying to use Bootstrap's flex but it just mashes my divs together. I am learning as i go and using w3schools' info as a reference, but some of the examples they use don't work once i transfer the code to my page....

Share this post


Link to post
Share on other sites
Posted (edited)

I'm not terribly versed in Bootstrap, but I can tell you that w3schools should be used as - at best - a place to find the terms you need to Google for the actual information.

From what I can see from the documentation, Bootstrap's flexbox coverage looks pretty good, though it's always been the small, medium, large, and extra large designations that my brain doesn't deal well with.

*edit* I'm not sure what kind of auto-prefixing Bootstrap does - I have to assume there's some as it's so widely used, but that may be a bit of a sticking point, especially with the mobile Samsung browser as it seems to have some idiosyncrasies of its own. Also, watch iOS Safari with flexbox as that can be a bit sticky if you're not using Babelify or another auto-prefixer (and sometimes even if you are - I've found it to do some strange things for no reliably reproduce-able reasons).

Edited by maxxd
expounding

Share this post


Link to post
Share on other sites
Posted (edited)
3 hours ago, maxxd said:

w3schools should be used as - at best - a place to find the terms you need to Google for the actual information.

I'm realizing that quite fast.

BTW, what's an auto-prefixer? (I mean what's it do)

Edited by Karaethon
Asking questions

Share this post


Link to post
Share on other sites

An auto-prefixer will add any necessary browser-specific prefixes to CSS rules during compile time. I use gulp-autoprefixer in my build flow right after I convert from .less to .css and concat all the files, but before I minify. My CSS task in my gulpfile looks like this:

const aw = require('gulp-load-plugins')({
	pattern: ['*'],
	scope: ['dependencies']
});

// .... other tasks

aw.gulp.task('compileCSS', () => {
	"use strict";
	return aw.gulp
		.src(theme.srcStyle)
		.pipe(aw.plumber(handleError))
		.pipe(aw.less({
			strictMath : 'on',
			strictUnits : 'on',
		}))
		.pipe(aw.concat('all.css'))
		.pipe(aw.autoprefixer({
			browsers: [
				"last 2 versions",
				"IE >= 10",
			],
			grid: false,
		}))
		.pipe(aw.cssmin())
		.pipe(aw.rename({
			extname : '.css',
			basename : 'style'
		}))
		.pipe(aw.gulp.dest(theme.destCSS));
});

Note the `aw.autoprefixer` call - that's using the gulp-autoprefixer module and asking it to add any browser-specific prefixes necessary for all browsers up to 2 versions back from the current version of all modern browsers, as well as Internet Explorer 10 and 11. It also turns grid CSS support off because the support for grid in media queries is a bit spotty. At any rate, it allows me to type this:

.wrapper{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
}

And get this output:

.wrapper{display:flex;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}

You can see how the flex-direction and justify-content browser-specific syntax for both IE10 and Safari 3.0 on iOS 1.0 are appended automatically. Obviously you'll get more rules as you change the values in the browsers array you pass into the autoprefixer call in your gulpfile.

 

tl;dr - it saves you a lot of time thinking, Googling, and typing while doing it's best behind the scenes to make sure your site's CSS is consistent across as many browsers as possible.

 

Totally random aside, but I'll probably start trying to use sourcemaps soon, which right now I don't due to the in-house development style at my job, because I'm currently trying to change that process.

Share this post


Link to post
Share on other sites

😫 

OMG... Ok so I've been out of the loop for a while (12 years, or 6 with good behavior [which I apparently cannot do]) when I was designing up to 2006 I never knew that css could do what it does now.... I'm needing to catch up.

Share this post


Link to post
Share on other sites
Posted (edited)

Don't feel bad, I've been doing this for 20 years pretty much straight through and I'm still playing catch-up. I've had some people scoff recently because I use Vagrant and Gulp and manually deploy WordPress sites to a server as opposed to Docker, Webpack, continuous integration, and automated deployment to a server-less AWS instance.

What I'm saying is that this stuff moves hella fast.

Edited by maxxd

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.