मुझे पता है कि मेरी समस्या के बारे में उत्तर देने के लिए यहाँ पर परिवर्तनशील पोस्ट हैं। लेकिन मुझे यकीन नहीं है कि कोई केवल सीएसएस का उपयोग कर रहा है और jQuery नहीं। अगर किसी को सीएसएस का उपयोग करके इसे हल करने के बारे में पता है तो मुझे बताएं।

.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
  position: fixed;
  width: 100vw;
}

.myDiv2 {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
  width: 100vw;
  margin-top: 100px;
  /* This is fixed not dependent on First Div's Height */
}
<h1>The div element</h1>
<!--Div that needs to be static while the content can scroll below it-->
<div class="myDiv">
  <h2>This is a heading in a div 1 element</h2>
  <p>This is some text in a div element.</p>
</div>

<div class="myDiv2">
  <h2>This is a heading in a div 2 element</h2>
  <p>This is some text in a div element.</p>
</div>

<p>This is some text outside the div element.</p>
1
Xavier 18 अप्रैल 2021, 11:44

4 जवाब

सबसे बढ़िया उत्तर
<!DOCTYPE html>
<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;    
  text-align: center;
  position : relative;
  width : 100vw;
}
.myDiv2 {
  border: 5px outset red;
  background-color: lightblue;    
  text-align: center;
  width : 100vw;
  margin-top : 100px; <!-- This is fixed not dependent on First Div's Height-->
}
</style>
</head>
<body>

<h1>The div element</h1>

<div class="myDiv">
  <h2>This is a heading in a div 1 element</h2>
  <p>This is some text in a div element.</p>
</div>

<div class="myDiv2">
  <h2>This is a heading in a div 2 element</h2>
  <p>This is some text in a div element.</p>
</div>

<p>This is some text outside the div element.</p>

</body>
</html>

या आप अपनी शैली सीएसएस "स्थिति: निश्चित" हटा सकते हैं, यह वही परिणाम है

-1
Anjasmara Dwi.S 18 अप्रैल 2021, 09:01

मुझे नहीं पता कि आप चाइल्ड डिव में गतिशील रूप से मार्जिन क्यों रखना चाहते हैं, लेकिन मेरे पास एक समाधान है: फिक्स्ड डिव को पेरेंट डिव कहा जाता है और अन्य डिव को चाइल्ड डिव कहा जाता है, पेरेंट डिव में मार्जिन-बॉटम डालें, उदाहरण के लिए:

/*  CSS Code  */
.myDiv {
  margin-bottom: 2rem;
}

आशा है कि यह आपकी मदद करेगा।

0
Zain Ul Abideen 18 अप्रैल 2021, 09:17