0

I have a PHP code which generates a really big table which does not fit into the screen (this is OK). The problem is the <body> tag does not want to fit the browser's document width, it only fits the width of screen. The <table> content does not fit into body. Body tag does not fit the content width I have looked here, added wrapper div.

how to make body tag elastic?

Well, wrapper div spans over the page's width correctly, but <body> tag still does not cover the wrapper div.

I have also looked here:

Make <body> fill entire screen?

And defined such css:

html, body { margin:0; padding:0; min-width: 100%; }

It did not help.

Ivan P.
  • 832
  • 2
  • 9
  • 26
  • a container auto-widths to it's parent/content. In this case 100% could refer to only half the screen as your inspector shows. Are you sure the correct stylings are being applied to your DOM elements? (I notice margin is crossed out in your screenshot) – treyBake May 03 '18 at 12:33
  • The crossed one is from user-agent, a default browser's style. It is OK. – Ivan P. May 03 '18 at 13:05

4 Answers4

4

Try to reset the whole page right before that css code with something like:

* {
padding: 0;
margin: 0;
}

html, body {
    margin:0; padding:0;
    min-width: 100%;
}

That's just an example, i'll encourage you to use a full CSS Reset. A CSS reset is something very common and used in almost every single webpage out there. From Meyer Web:

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. (...) Reset styles quite often appear in CSS frameworks.

I'd say it is a good practice to reset the styles, it forces the dev team to proactively add any CSS property they want to be used in the web. (Or to rely on someone who has gone through this deliberation process, if you use a framework or premade template.)

versvs
  • 643
  • 2
  • 12
  • 30
  • Obviously, rules for `html` and `body` override **the same rules** applied on `*` . It was not effective. – Ivan P. May 03 '18 at 12:15
  • As i mentioned in my answer, it is an example, a full, correctly implemented reset that will allow you to achieve your goal is more complex, and it is definitely the way to go :) – versvs May 03 '18 at 12:55
  • A complete style reset did not help. But still thank you for pointing to it, I have been looking for it some time ago. – Ivan P. May 03 '18 at 13:03
1

I don't know if this will work, but due to some browser inconsistencies and width calculations, adding width: 100vw or min-width:100vw might help.

Ryan Hillis
  • 25
  • 7
  • No effect, sorry. – Ivan P. May 03 '18 at 12:25
  • 1
    Ok. A solution that might work would involve JavaScript. You can run in your JavaScript `document.body.style.width = document.style.width` Without full CSS code it's just a shot in the dark. There might be other css code interfering, so make sure to put your full css into the question. – Ryan Hillis May 03 '18 at 12:28
  • Because those properties are obsolete, you can instead use document.body.clientWidth = "100vw". Running this after a small delay to make sure the body element is ready might work. – Ryan Hillis May 03 '18 at 12:34
1

Ryan Hillis pointed to use JavaScript, here:

https://stackoverflow.com/a/50154981/

so I have assigned an ID for wrapper div with a correct div calculation and recalculating with jquery body width:

            $(function() {
            let usedwidth = $("div#hugewrapper").css("width");
            $("html").css("width", usedwidth);
            $("body").css("width", usedwidth);
        });

It is rough, I know, but it kinda works.

Ivan P.
  • 832
  • 2
  • 9
  • 26
0

Try using this; it should enable the HTML and Body tags to wrap around everything nicely.

html, body {
  width: 100%;
  float: left;
  display: block;
}