Home > Developer > JavaScript
Incomplete display of webpage content
I. bug description
In normal cases, the subject width of a webpage is PX.
When the browser width is reduced and the scroll bar appears, the effect is as follows. The right side is blank, leading to incomplete content display.
Ii. bug reproduction and solution 1. The Code is as follows:There is a gray background div in the body, and a p tag with a fixed width of PX is nested in the div.
<! DOCTYPE html>Normal display
When the browser shows a scroll bar,
2. Problem AnalysisThe default div width is 100%, which can be adaptive. The body width is also 100%, with the html Tag width as a reference, while the html width increases or decreases as the browser scales.
The reason for incomplete display in the browser is that when the browser width becomes smaller and the scroll bar appears, the div width is still adaptive according to the browser width, while the p tag width is fixed and exceeds the browser width, so there is a blank space.
3. SolutionSet the minimum body width to the width of the p tag. The true solution is the same. In the real environment, a large width is usually formed by setting a fixed width element floating.
<! DOCTYPE html> Body {min-width: 1280px ;}</Style> <body> <div style = "background: # eee; "> test text Test test text test text <p style = "background -color: red; width: 1280px; "> 1280px wide p tag 1280px wide p tag 1280px wide p tag 1280px wide p tag 1280px wide p tag 1280px wide p tag 1280px wide p tag 1280px wide p tag 1280px wide p tag 1280px wide p tag 1280px wide p tag 1280px wide p tag 1280px wide p tag 1280px wide p tag 1280px wide p tag 1280px wide p tag 1280px wide p tag 1280px wide p tag 1280px wide p tag 1280px wide p tag 1280px wide p tag 1280px wide p tag 1280px wide p tag 1280px wide p tag 1280px width p tag 1280px width p tag 1280px width p tag 1280px width p tag 1280px width p tag 1280px width p tag 1280px width p tag 1280px width p tag </p> test text Test text test text </div> </body> 4. SummaryAlthough it is a small problem, you must pay attention to it during development. Because many online pages have such problems. For example, csdn
Starof, the author of this article, is constantly learning and growing because of the changing knowledge. The content of this article is also updated from time to time. To avoid misleading readers and facilitate tracing, Please repost the Source: Ghost.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
