Odpověď na otázku

momentálne mám hotové hned 2 stránky pomocou <div class/id> a <iframe>... chcel bych se spýtať ktorý je vhodnejší pre bootstrap,... ako dalšie by ma zaujímalo čo sa týka kompatibility funkcie CSS - calc() s androidom, ostatne pri bootstrapu predpokladám že pri načítaní v mobilu nevyužije positioning ktorý využíva pri načítaní v PC,... na mobilu bych rád mal všetko pod sebou v poradí, hlavicka, menu (zlúčené vertikálne a horizontálne), obsah, pravý stĺpec a potom patičku...

-----

Kód v prvom prípade je:

index.html

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
        Web
    </title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="web">
        <div id="hlavicka">
            <iframe src="hlavicka.html" width="100%" height="100%">
            </iframe>
        </div>
        <div class="menu" id="horizontal-menu">
            <iframe src="horizontal-menu.html" width="100%" height="100%">
            </iframe>
        </div>
        <div class="content">
            <div class="menu" id="vertical-menu">
                <iframe src="vertical-menu.html" width="100%" height="100%">
                </iframe>
            </div>
            <div class="obsah">
                <div class="menu" id="obs">
                    <iframe src="obs/uvod.html" width="100%" height="100%">
                    </iframe>
                </div>
                <div id="copyright">
                    <iframe src="copyright.html" width="100%" height="100%">
                    </iframe>
                </div>
            </div>
            <div id="right-sidebar">
                <iframe src="right-sidebar.html" width="100%" height="100%">
                </iframe>
            </div>
        </div>
    </div>
</body>

</html>

style.css

.web{
    position: relative;
    height: 100%;
    width: 100%;
}
#hlavicka{
    position: relative;
    height: 100px;
    width: 100%;
}
#horizontal-menu{
    position: relative;
    height: 40px;
    width: 100%;
}
.content{
    position: relative;
    height: calc(100% - 140px);
    width: 100%;
}
#vertical-menu{
    position: relative;
    height: 100%;
    width: 200px;
    top: 0px;
    left: 0px;
    float: left;
}
.obsah{
    position: relative;
    height: 100%;
    width: calc(100% - 350px);
    top: 0px;
    left: 0px;
    float: left;
}
#obs{
    position: relative;
    height: calc(100% - 20px);
    width: 100%;
    top: 0px;
    left: 0px;
    float: left;
}
#copyright{
    position: relative;
    height: 20px;
    width: 100%;
    top: 0px;
    left: 0px;
}
#right-sidebar{
    position: relative;
    height: 100%;
    width: 150px;
    top: 0px;
    right: 0px;
    float: right;
}

v druhom prípade:

index.html

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
        Web
    </title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="web">
        <div id="hlavicka">
            <iframe src="hlavicka.html" width="100%" height="100%">
            </iframe>
        </div>
        <div class="menu">
            <div class="target" id="horizontal-menu">
                <iframe src="horizontal-menu.html" width="100%" height="100%">
                </iframe>
            </div>
            <div class="target" id="vertical-menu">
                <iframe src="vertical-menu.html" width="100%" height="100%">
                </iframe>
            </div>
        </div>
        <div class="content">
            <div class="obsah">
                <div class="target" id="obs">
                    <iframe src="obs/uvod.html" width="100%" height="100%">
                    </iframe>
                </div>
                <div id="copyright">
                    <iframe src="copyright.html" width="100%" height="100%">
                    </iframe>
                </div>
            </div>
            <div id="right-sidebar">
                <iframe src="right-sidebar.html" width="100%" height="100%">
                </iframe>
            </div>
        </div>
    </div>
</body>

</html>

style.css

.web{
    position: relative;
    height: 100%;
    width: 100%;
}
#hlavicka{
    position: relative;
    height: 100px;
    width: 100%;
}
#horizontal-menu{
    position: relative;
    height: 40px;
    width: 100%;
}
#vertical-menu{
    position: relative;
    height: calc(100% - 140px);
    width: 200px;
    top: 0px;
    left: 0px;
    float: left;
}
.content{
    position: relative;
    height: calc(100% - 140px);
    width: calc(100% - 200px);
    top: 0px;
    left: 0px;
    float: left;
}
.obsah{
    position: relative;
    height: 100%;
    width: calc(100% - 150px);
    top: 0px;
    left: 0px;
    float: left;
}
#obs{
    position: relative;
    height: calc(100% - 20px);
    width: 100%;
    top: 0px;
    left: 0px;
    float: left;
}
#copyright{
    position: relative;
    height: 20px;
    width: 100%;
    top: 0px;
    left: 0px;
}
#right-sidebar{
    position: relative;
    height: 100%;
    width: 150px;
    top: 0px;
    right: 0px;
    float: right;
}

HTML - div class/id + bootstrap