нет перекрытия, но стеки div при изменении размера браузера

Question

нет перекрытия, но стеки div при изменении размера браузера

0

4 div должны складываться друг на друга, и они не должны пересекаться!

Голова должна быть как ширина 4.footer 100%
Меню должно складываться с 1.Head и 4.Footer.
Содержимое должно быть сосредоточено на странице и в браузере изменить размер 3.Content должен складываться с другим div и не перекрываться

Здесь ссылка на картинку, которая нарисовала проблему:
https://docs.google.com/file/d/0B5Ki_dh4A-VJd2VNZ1o5b0RzQmc/edit?usp=sharing

здесь ссылка, как это должно быть:
https://docs.google.com/file/d/0B5Ki_dh4A-VJWllueWtwX0JSTFE/edit?usp=sharing

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">

        #headr{                
            height: 100px;
            width: 100%;
            background-color: #33ff33;
            top: 0;
            left: 0;
            right: 0;
            position: fixed;
            border: 1px #000 solid;
        }

        #menu{
            height: 100%;
            width: 150px;
            background-color: #ccff00;
            left: 0;
            top: 0;
            position: fixed;
            border: 1px #000 solid;

        }
        #content{

            background: rgba(225, 225, 225, 0.5);
            border: 1px #000 solid;
            height: 600px;
            width: 800px;
            margin-left: -400px;
            margin-top: -300px;
            left: 50%;
            top: 50%;
            position: fixed;



        }
        #footer{
            height: 35px;
            width: 100%;
            background-color: #ff3300;
            bottom: 0;
            left: 0;
            right: 0;
            position: fixed;
            border: 1px #000 solid;

        }

    </style>


</head>
<body>
    <div id="headr"><p style="text-align: center;"> 1. Head</p></div>
    <div id="menu"><p style="text-align: center;"> 2. Menu</p></div>
    <div id="content"><p style="text-align: center;"> 3. Content</p></div>
     <div id="footer"><p style="text-align: center;"> 4. Footer</p></div>


</body>

larson 21 окт. 2013, в 16:56

Источник

0

Можете ли вы связать изображение с правильной визуализацией, которую вы хотите?
DaniP 21 окт. 2013, в 14:19
0

вот ссылка: docs.google.com/file/d/0B5Ki_dh4A-VJWllueWtwX0JSTFE/…
larson 21 окт. 2013, в 15:08

Теги:

html

css

overlapping

1 ответ

Ещё вопросы

Можете ли вы связать изображение с правильной визуализацией, которую вы хотите?
вот ссылка: docs.google.com/file/d/0B5Ki_dh4A-VJWllueWtwX0JSTFE/…

DaniP · Accepted Answer · 2013-10-21T15-27-00.000Z

Привет, пожалуйста, просмотрите код в этой ссылке http://jsfiddle.net/9gPMR/99/

It an option using display:table and table-cell to fit on the window.

Сообщите мне любой вопрос или предложение об этом.

спасибо за это, попробую! Пока что похоже решение проблемы :)
сработало, еще раз спасибо за решение !!! :)