Geek Answers Handbook

CSS width is 100% limited by the browser window (it does not apply to the right scroll pane)

This site is full width and adapts to the size of the browser window. However, as soon as the browser window is smaller than the displayed content, the title will be disabled after scrolling to the right.

By default, the default width of 100% only works for the width of the browser window, not the page width! The same seems to apply on the vertical axis.

Example

#title
{
  height: 50px;
  color: white;
  background-color: #404040;
}
#content
{
  width: 800px;
  background-color: #f0f0f0;
}
<div id="title">
    TITLE
</div>
<div id="content">
    CONTENT
</div>
Run codeHide result

Actual result

This is what it looks like when the page scrolls to the left.

1

2

(For simplicity and privacy, non-issue content is censored.)

+4
source share
2 answers

- .

body
{
    position: absolute;
    min-width: 100%;
    min-height: 100%;
}

#menu-background
{
    z-index: -1;
    position: absolute;
    width: 250px;
    height: 100%;
    background-color: #404040;
}

HTML

<div id="menu-background"></div>

<body> , div div. , min-width 100%: , .

, , <div>, .

X Y ( ).

+2

, width: 100% , .

, .

10.2 : width

<percentage>

. , . , undefined CSS 2.1.

CSS.

1. position: fixed

.

#title { 
  height: 50px;
  color: white;
  background-color: #404040;
  position: fixed; /* NEW */
  width: 100%; /* NEW */
}

DEMO

2. position: absolute

:

#title {
  height: 50px;
  color: white;
  background-color: #404040;
  position: absolute;
  width: 100%; 
}

DEMO

+1

More articles:


All Articles