CODEWITHSUNDEEP
htmlcss
Ivan P.
Ivan P.

Reputation: 926

How to make <body> tag to cover the whole content?

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.

Upvotes: 0

Views: 1943

Answers (4)

Ivan P.
Ivan P.

Reputation: 926

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.

Upvotes: 1

user7236046
user7236046

Reputation:

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

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

Upvotes: 0

Ryan Hillis
Ryan Hillis

Reputation: 25

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.

Upvotes: 1

versvs
versvs

Reputation: 643

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.)

Upvotes: 4

Related Questions