wie man divs passen sich dynamisch dem Bildschirm-Auflösungen?

Brauche ich 3 divs, von denen 1 auf der Breite von 1000px und werden in der Mitte der Seite, und die anderen 2 sollten füllen der Bildschirmbreite von der linken und rechten Seite des Haupt-div. Ich will dies funktioniert auf allen Bildschirmauflösungen, aber ich kann nicht finden die Art und Weise, es zu tun.

Mein code bisher (ich habe Farben als visuelle Hilfe)-

css:

#leftside { background: red; float: left; width: 100%; position: relative; width: 100%; }
#rightside { background: blue; float: left; width: 100%; position: relative; }
#container { background: yellow; float: left; width: 1000px; position: relative; }

html:

<html>
<body>
<div id="leftside">&nbsp;</div>
<div id="container">the content</div>
<div id="rightside">&nbsp;</div>
...

Bisher ist es nicht funktioniert. wie mache ich den "linken Seite" und "rechten" divs automatisch anpassen, was ist Links in der Bildschirm-Auflösung - für jede Bildschirm-Auflösung?

Danke für die Hilfe.

InformationsquelleAutor Eyal Binehaker | 2013-03-02

  1. 2

    können Sie erreichen, indem Sie dies mit css 

     #maindiv{

    width:1000px;
    }

    #rightdiv, #leftdiv{ 

    width:calc((100%-1000)/2);
    }
    #rightdiv{

    //other styles
    }
    #leftdiv{

    //other styles
    }

    test-browser-Unterstützung für calc()

    der :calc() option unterstützt alle Browser?
    Ihre Antwort @Roman C

    InformationsquelleAutor Sahil Popli

  2. 1

    Müsstest du Spritzen einige javascript-code:

    $content = $('.content');
$sidebar = ($(window).width() - $content.width()) / 2;
$('.leftside').css('width', $sidebar);
$('.rightside').css('width', $sidebar);

    Siehe demo

    Dann verwenden media queries zu ändern, der Mitte div's Breite, wenn der Bildschirm kleiner wird.

    Super!!! vielen Dank 🙂
    Kein problem, können Sie es akzeptieren, da eine Antwort, wenn es gelöst ist deine Frage 😉

    InformationsquelleAutor Jürgen Paul

  3. 0

    Eine Möglichkeit ist es, die divs in eine Tabelle mit einer Zeile und 3 Zellen. Der Tisch hat die Breite 100% und stellen Sie die Breite von der Mitte td.

    Ich bin sicher, jemand wird dir empfehlen, einen besseren Weg, in CSS aber.

    danke, ich möchte wirklich vermeiden, entwerfen mit <table> - Elemente.

    InformationsquelleAutor SteveP

Schreibe einen Kommentar