Как сделать border-top всегда заполнять всю страницу

Я хочу сделать границу сверху всегда полной длины. Все выглядит нормально, когда мой экран равен или больше 990px, но если бы я сделал его ниже (показать вертикальную прокрутку) border-top помещается только на видимую часть.Как сделать border-top всегда заполнять всю страницу

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width" />  
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body style="background:aliceblue; border-top: solid 10px green;"> 
    <form> 
     <div style="width:900px; margin-left:auto; margin-right:auto;">TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTT 
     ESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</div> 
    </form> 

</body> 
</html>

Here is JSFiddle link

Как я могу сделать границу для всей страницы, когда ширина браузера меньше 990px.

источник

2014-12-31 mybirthname

Вы можете сделать еще один основной контейнер и использовать inline-block и border там:

<body style="background:aliceblue"> 
 
    <div style="border-top: solid 10px green;display:inline-block;min-width:100%;"> 
 
    <form> 
 
     <div style="width:900px; margin-left:auto; margin-right:auto;">TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTT 
 
     ESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES TTESTTESTTESTTESTTESTTESTTEST</div> 
 
    </form> 
 
    </div> 
 
</body>

Помимо Я рекомендую вам использовать classnames будет намного проще в обращении стилей :

.blue { 
 
    background: aliceblue; 
 
} 
 
.main { 
 
    border-top: solid 10px green; 
 
    display: inline-block; 
 
    min-width: 100%; 
 
} 
 
.main form > div { 
 
    width: 900px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<body class="blue"> 
 
    <div class="main"> 
 
    <form> 
 
     <div>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTT ESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES TTESTTESTTESTTESTTESTTESTTEST</div> 
 
    </form> 
 
    </div> 
 
</body>

источник

2014-12-31 15:00:07 DaniP

Пропустить мин-ширину! Спасибо за быстрый ответ. Я буду принимать его всего 3 минуты. – mybirthname

@mybirthname рад помочь U :) – DaniP

Как сделать border-top всегда заполнять всю страницу

ответ

Смежные вопросы