CSS div div 100% minus nPx कैसे सेट करें

199

मेरे पास एक रैपर div है जो 2 divs एक दूसरे के बगल में है। इस कंटेनर के ऊपर मेरी एक डिव है जिसमें मेरा हेडर है। रैपर div हेडर की ऊंचाई 100% होनी चाहिए। हेडर लगभग 60 px है। यह तय है। तो मेरा सवाल यह है कि मैं अपने रैपर तलाक की ऊँचाई को 100% घटाकर 60 px कैसे करूँ?

<div id="header"></div>
<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>
css  height 
— Martijn
स्रोत
16
मैं वास्तव में कामना करता हूं कि w3c चौड़ाई में कुछ मूल्य माइनस निरंतर संपत्ति जोड़ने पर विचार करता है, वे चौड़ाई में सीमाओं को शामिल करना भूल गए, लेकिन उन्हें बदलना चाहिए था कि सीएसएस हैक की अधिकांश परिभाषा गायब हो जाएगी यदि ये दो चीजें उपलब्ध थीं।
— समरजीत सामंत

जवाबों:

79

यहाँ फ़ायरफ़ॉक्स / IE7 / Safari / Chrome / Opera के तहत परीक्षण किया गया एक कार्यशील सीएसएस है।

* {margin:0px;padding:0px;overflow:hidden}
div {position:absolute}
div#header {top:0px;left:0px;right:0px;height:60px}
div#wrapper {top:60px;left:0px;right:0px;bottom:0px;}
div#left {top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
div#right {top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}

"ओवरफ्लो-वाई" w3c- अनुमोदित नहीं है, लेकिन हर प्रमुख ब्राउज़र इसका समर्थन करता है। यदि आपकी सामग्री बहुत अधिक है, तो आपके दो div #left और #right एक वर्टिकल स्क्रॉलबार प्रदर्शित करेगा।

इसके लिए IE7 के तहत काम करने के लिए, आपको DOCTYPE जोड़कर मानकों-अनुरूप मोड को ट्रिगर करना होगा: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
	*{margin:0px;padding:0px;overflow:hidden}
	div{position:absolute}
	div#header{top:0px;left:0px;right:0px;height:60px}
	div#wrapper{top:60px;left:0px;right:0px;bottom:0px;}
	div#left{top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
	div#right{top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}
</style>
</head>
<body>
<div id="header"></div>
<div id="wrapper">
  <div id="left"><div style="height:1000px">high content</div></div>
  <div id="right"></div>
</div>
</body>
स्निपेट का विस्तार करें

— Alsciende
स्रोत
यह एफएफ में काम करता है, लेकिन मैं इसे IE7 के तहत काम नहीं करता। मैं केवल 'हेडर' कोड देखता हूं: <div id = "हैडर"> हैडर </ div> <div id = "आवरण"> <div id = "left"> वाम </ div> <div id = "right"> राइट </ div> </ div>
— मार्टिजन
क्या आपने मानकों के अनुरूप मोड को ट्रिगर किया था? मैं अपनी प्रतिक्रिया में एक उदाहरण पृष्ठ जोड़ूंगा।
— अलसीकेंडे
1
इसके अलावा, अगर आपको इन डिव को पेज के बीच में या कहीं और रखने की ज़रूरत है, तो बस उन्हें कंटेनर डिव में लपेटें और position: relativeकंटेनर पर सेट करें। फिर कंटेनर को पृष्ठ पर कहीं भी रखें।
— मृकफ जूल 30'11
क्या आंतरिक div के बारे में, उदाहरण के लिए # एलटीटी के अंदर अगर मैं 2% 40% और 60% की संबंधित ऊंचाइयों के साथ चाहता हूं?
— टेकहंटर
क्या कोई विशिष्ट कारण है कि px को 0 मान मापदंडों पर निर्दिष्ट किया गया था?
— कैसंड्रा
274

CSS3 में आप उपयोग कर सकते हैं 

height: calc(100% - 60px);
— libjup
स्रोत
25
सुनिश्चित करें कि आपके पास "-" चिह्न से पहले और बाद में जगह है। फ़ायरफ़ॉक्स को "-" चिन्ह से पहले जगह चाहिए।
— कोडलर
7
उत्तम। मुझे नहीं पता था कि CSS3 ऐसा कर सकता है।
— टॉम बिच
वाह! वास्तव में मैं क्या चाहता था। धन्यवाद।
— संधू
1
यह शानदार है
— मिरको
47

यदि आपको IE6 का समर्थन करने की आवश्यकता है, तो जावास्क्रिप्ट का उपयोग करें ताकि रैपर div का आकार प्रबंधित करें (विंडो का आकार पढ़ने के बाद पिक्सेल में तत्व की स्थिति निर्धारित करें)। यदि आप जावास्क्रिप्ट का उपयोग नहीं करना चाहते हैं, तो यह नहीं किया जा सकता है। वर्कअराउंड हैं लेकिन हर मामले में और हर ब्राउज़र में इसे बनाने के लिए एक या दो सप्ताह की उम्मीद है।

अन्य आधुनिक ब्राउज़रों के लिए, इस css का उपयोग करें:

position: absolute;
top: 60px;
bottom: 0px;
— हारून दिगुल्ला
स्रोत
साइट केवल IE 7 संगत है। जब मैं ऊंचाई का उपयोग करता हूं: 100% और शीर्ष: 60 पीएक्स; मैं अभी भी एक स्क्रॉलबार। मैं 60px नीचे स्क्रॉल कर सकता हूं।
— मार्टिज़न
4
ऊँचाई निर्दिष्ट न करें, ऊपर और नीचे का उपयोग करें और ब्राउज़र को ऊँचाई की गणना करने दें।
— आरोन दिगुल्ला
लेकिन मैं चाहता हूं कि मेरे पृष्ठ की अधिकतम ऊंचाई 100% माइनस 60px हो; यदि सामग्री इससे बड़ी है, तो मैं ओवरफ्लो का उपयोग करके div में स्क्रॉलबार चाहता हूं: स्क्रॉल;
— मार्टि
4
स्क्रॉलबार के लिए, आवरण के अंदर एक div जोड़ें जो इसे पूरी तरह से भरता है और उस अतिप्रवाह को बनाता है: स्क्रॉल;
— आरोन दिगुल्ला
ध्यान दें कि IE7 में बग के कारण, यह अभी भी विफल हो सकता है। यदि आप इसे काम पर नहीं ला सकते हैं, तो जावास्क्रिप्ट का उपयोग करें। मुझे पता है, आप इसे पसंद नहीं करते हैं, लेकिन अजीब बग से जूझ रहे काम के एक हफ्ते के मुकाबले इसे वजन करते हैं।
— आरोन दिगुल्ला
6

महान एक ... अब मैंने% का उपयोग करना बंद कर दिया है वह उसने ... मुख्य कंटेनर को छोड़कर नीचे दिखाया गया है:

<div id="divContainer">
    <div id="divHeader">
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">
        </div>
        <div id="divContentRight">
        </div>
    </div>
    <div id="divFooter">
    </div>
</div>

और यहाँ सीएसएस है:

#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 250px;
    bottom: 0px;
}
#divContentRight {
    position: absolute;
    top: 0px;
    left: 254px;
    right: 0px;
    bottom: 0px;
}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

मैंने सभी ज्ञात ब्राउज़रों में इसका परीक्षण किया और ठीक काम कर रहा हूं। क्या इस तरह से कोई कमियां हैं?

— Jayaveer
स्रोत
4

आप ऊंचाई की तरह कुछ कर सकते हैं : कैल्क (100% - एनपीएक्स); उदाहरण के लिए ऊंचाई: कैल्क (100% - 70 पीएक्स);

— DRB
स्रोत
2 
div {
    height: 100%;
    height: -webkit-calc(100% - 60px);
    height: -moz-calc(100% - 60px);
    height: calc(100% - 60px);
}

कम उपयोग करते समय सुनिश्चित करें 

height: ~calc(100% - 60px);

अन्यथा कम इसे सही ढंग से संकलित करने वाला नहीं है

— दाधीच सौरव
स्रोत
0

यह प्रश्न का सही जवाब नहीं देता है, लेकिन यह वही दृश्य प्रभाव पैदा करता है जिसे आप प्राप्त करने की कोशिश कर रहे हैं।

<style>

body {
  border:0;
  padding:0;
  margin:0;
  padding-top:60px;
}

#header {
  position:absolute;
  top:0;
  height:60px;
  width:100%;
}

#wrapper {
  height:100%;
  width:100%;
}
</style>
— नोएल वाल्टर्स
स्रोत
0

इस उदाहरण में आप विभिन्न क्षेत्रों की पहचान कर सकते हैं:

<html>
<style>
#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
    background-color:blue;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    bottom: 0px;
    background-color:red;
}
#divContentCenter {
    position: absolute;
    top: 0px;
    left: 200px;
    bottom: 0px;
    right:200px;
    background-color:yellow;
}
#divContentRight {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width:200px;
    background-color:red;
}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color:blue;
}
</style>
<body >

<div id="divContainer">
    <div id="divHeader"> top
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">left
        </div>
        <div id="divContentCenter">center
        </div>
        <div id="divContentRight">right
        </div>
    </div>
    <div id="divFooter">bottom
    </div>
</div>

</body>
</html>
— रेनजो सिओट
स्रोत
0

मैंने अभी तक इस तरह का कुछ भी पोस्ट नहीं किया है, लेकिन मुझे लगा कि मैं इसे वहां रखूंगा। 

<div class="main">
<header>Header</header>
<div class="content">Content</div>

फिर सीएसएस:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.main {
    height: 100%;
    padding-top: 50px;
    box-sizing: border-box;
}

header {
    height: 50px;
    margin-top: -50px;
    width: 100%;
    background-color: #5078a5;
}

.content {
    height: 100%;
    background-color: #999999;
}

यहाँ एक कार्यशील jsfiddle है

नोट: मुझे इस बारे में कोई जानकारी नहीं है कि इसके लिए ब्राउज़र संगतता क्या है। मैं बस वैकल्पिक समाधानों के साथ खेल रहा था और यह अच्छा काम कर रहा था।

— FreedomMan
स्रोत
-1

100% करने के लिए सेट एक बाहरी आवरण div का उपयोग करें और फिर अपने आंतरिक आवरण div 100% अब उस के सापेक्ष होना चाहिए।

मैंने सोचा था कि यह मेरे लिए काम करता था, लेकिन स्पष्ट रूप से नहीं:

<html>
<body>
<div id="outerwrapper" style="border : 1px solid red ; height : 100%">
<div id="header" style="border : 1px solid blue ; height : 60px"></div>
<div id="wrapper"  style="border : 1px solid green ; height : 100% ; overflow : scroll ;">
  <div id="left" style="height : 100% ; width : 50% ; overflow : scroll; float : left ; clear : left ;">Some text 

on the left</div>
  <div id="right" style="height : 100% ; width 50% ; overflow : scroll; float : left ;">Some Text on the 

right</div>
</div>
</div>
</body>
</html>
— कैड रूक्स
स्रोत
का एक उदाहरण दे सकते हैं। मुझे समझ नहीं आ रहा है
— Martijn
मैंने वह पोस्ट किया जो मैं सोच रहा था, लेकिन मैं इसे जल्दी / देर से काम नहीं कर सकता। शायद अगर मुझे थोड़ी और नींद आ जाए।
— केड रूक्स
-1

यदि आप पूर्ण स्थिति और जैज़ का उपयोग नहीं करना चाहते हैं, तो यहां एक निश्चित मैं उपयोग करना चाहता हूं:

आपका html:

<body>    
   <div id="header"></div>
   <div id="wrapper"></div>
</body>

आपका सीएसएस:

body {
     height:100%;
     padding-top:60px;
}
#header {
     margin-top:60px;
     height:60px;
}
#wrapper {
     height:100%;
}
— scotsqueakscoot
स्रोत
1
मुझे नहीं लगता कि यह उम्मीद के मुताबिक काम करता है। पहले #headerहोना चाहिए margin-top:-60px;। दूसरा, height:100%इसका मतलब है कि ऊंचाई 100% मूल तत्वों की ऊंचाई होगी, जिसमें मार्जिन, पैडिंग और बॉर्डर शामिल नहीं हैं। आपकी स्क्रॉल सेटिंग के आधार पर, इससे या तो स्क्रॉल बार दिखाई देंगे या आपकी सामग्री क्रॉप हो जाएगी।
— काइलोस
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.