Применение переполнения, скрытого к корпусу

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
html { 
    width:100%; 
    height:100%; 
} 

body { 
    overflow: hidden; 
    height: 300px; 
    border: 6px solid red; 
} 
</style> 
</head> 
<body> 
<h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1> 
<h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1> 
<h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1> 
</body> 
</html>

Это мой код. Однако «хаха» внутри тела переполняется вне тела, независимо от переполнения: скрытое свойство тела, и я не знаю почему.Применение переполнения, скрытого к корпусу

Browser: Firefox 34.0.5

источник

2014-12-28 user2901156

Это потому, что вы не можете стилизовать тело, как это.
Попробуйте поместить h1 s внутри div, а затем, указав, что высота 300 и переполнение скрыты.
Like so

HTML

<div> 
    <h1>haha</h1> 
    <h1>haha</h1> 
    <h1>haha</h1> 
    <h1>haha</h1> 
    <h1>haha</h1> 
    <h1>haha</h1> 
    <h1>haha</h1> 
    <h1>haha</h1> 
    <h1>haha</h1> 
    <h1>haha</h1> 
    <h1>haha</h1> 
    <h1>haha</h1> 
    <h1>haha</h1> 
    <h1>haha</h1> 
    <h1>haha</h1> 
    <h1>haha</h1> 
    <h1>haha</h1> 
    <h1>haha</h1> 
    <h1>haha</h1> 
    <h1>haha</h1> 
</div>

CSS

div { 
     overflow:hidden; 
     height: 300px; 
     border: 6px solid red; 
    }

источник

2014-12-28 18:11:32

Вы должны добавить DIV внутри тега тела и поместить все ваши h1 внутри него. Затем примените свой переполнение: скрытый к нему.

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
html { 
    width:100%; 
    height:100%; 
} 

body div{ 
    overflow: hidden; 
    height: 300px; 
    border: 6px solid red; 
} 
</style> 
</head> 
<body> 
<div> 
<h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1> 
<h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1> 
<h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1><h1>haha</h1> 
</div> 
</body> 
</html>

источник

2014-12-28 18:22:38 yogihosting

В HTML, установив overflow только на body элемент есть он будет влиять на корневой элемент htmlвместоbody элемента, что делает его, кажется, как будто вы никогда не установить его на body элемент.

CSS spec содержит информацию о том, как это работает (хотя это поведение специфично для HTML), но это в основном то, что происходит, и ожидается, что поведение, предназначенное для использования в гораздо более распространенном случае использования контрольной страницы scrollbars (так что вам нужно будет только установить его на любом элементе, а не на обоих). Это означает, что он работает одинаково во всех браузерах.

Вы можете предотвратить это, также установив overflow на элемент html; это также указано в спецификации. Таким образом, вы можете использовать обертку div, как упомянуто другими, или вы можете установить overflow: hidden или overflow: auto на html так что вы не должны использовать обертку:

html { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 

body { 
    overflow: hidden; 
    height: 300px; 
    border: 6px solid red; 
}

_{Обратите внимание, что настройка overflow: visible - это то же самое, что и не для большинства элементов, поскольку это начальное значение, определенное спецификацией.}

источник

2014-12-28 18:49:29 BoltClock

Применение переполнения, скрытого к корпусу

ответ

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