Элементы Div ведут себя странно при изменении размера окна браузера

Я сделал шаблон для веб-сайта, и проблема в том, что когда я изменяю размер окна браузера или нахожусь на мобильном телефоне или планшете, head, footer а также div.hero "режутся". Это шаблон html5b со сбросом css, хотя и не отзывчивый.

Вот HTML: (Я также сделал скрипку с этим HTML и CSS, который я использовал. Если вы прокрутите вправо, вы увидите, о чем я говорю. http://jsfiddle.net/S77FC/2/. Но имейте в виду, что head там не появляется, на всякий случай там "ошибка")

<!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="/css/main.css">

    <!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <script>window.html5 || document.write('<script src="js/vendor/html5shiv.js">      <\/script>')</script>
    <![endif]-->
</head>
    <!--[if lt IE 7]>
        <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
    <![endif]-->
<body>

    <header>
        <div class="wrapper clearfix">  
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Lorem</a></li>
                    <li><a href="#">Ipsum</a></li>
                    <li><a href="#">Dolor</a></li>
                    <li class="right"><a href="#">Sit Amet</a></li>
                </ul>
            </nav>
        </div>  
    </header>

    <div class="hero">
        <div>
            <h1>Lorem ipsum dolor sit amet.</h1>
            <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
        </div>
    </div>
    <div id="main" class="wrapper clearfix">

        <div class="infobox">
            <h3>Lorem ipsum.</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>

        <div class="infobox">
            <h3>Lorem ipsum.</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>

        <div class="infobox">
            <h3>Lorem ipsum.</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>

    </div>

    <footer>
        <div id="top">
            <div class="wrapper clearfix">
                <div class="footerbox">
                    <h3>Lorem ipsum</h3>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Lorem</a></li>
                        <li><a href="#">Ipsum</a></li>
                    </ul>
                </div>
                <div class="footerbox">
                    <h3>Support</h3>
                    <ul>
                        <li><a href="#">Lorem</a></li>
                        <li><a href="#">Ipsum</a></li>
                        <li><a href="#">Dolor</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js </script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
    <script src="../js/main.js"></script>
</body>
</html>
Источник

1 ответ

Решение

Это все проблемы CSS. По ширине у вас есть элемент в вашем заголовке (<div class="wrapper clearfix">...</div>), который имеет явную ширину 960 пикселей. Ширина заголовка, div.hero и нижнего колонтитула будет определяться шириной окна браузера. Таким образом, если окно браузера имеет ширину менее 960 пикселей, вы получаете переполнение div.wrapper, которое приводит к отображению нежелательной желтой части.

Вероятно, то, что вы хотите сделать, установлено min-width: 960px; на элементе вашего тела.

Источник
Другие вопросы по тегам